问题标签 [react-styleguidist]

我有一个React Web 组件库的样式指南

加载基本 URL时，这些部分按预期加载并且一切正常。

当我加载基本 URL/index.html时（例如，在右上角选项卡中加载“层”后切换回“组件”），应该加载相同的页面，但 Web 组件无法加载且没有错误。检查示例时，会抛出错误，可能是因为它们无法访问 Web 组件。

我的猜测是应该在样式指南配置中进行一些调整。有没有人有任何提示？我对 Web 组件还很陌生，所以我几乎处于黑暗中

谢谢

我在构建样式指南“npx styleguidist build”时遇到了问题，但在运行“npx styleguidist server”时却没有。在 styleguidist build 生成的 css 文件中，字体链接与 build 文件夹中的内容不匹配：

如果我将css构建文件中的这个url替换为：

查看构建文件夹的树：styleguidedist 构建文件夹的图片

styleguide.config.js ：

我正在扩展一个使用 react-styleguidist 作为网络文档的反应库（请参阅https://react-ui.geops.de/）。基本 URL 呈现组件指南。我想添加一个呈现完全不同的组件（演示页面）的路径/主题。我在许多应用程序中使用过 react-router-dom，但我认为它在 styleguidist 中的工作方式略有不同。

我尝试在 StyleGuide.js 文件中以传统方式使用它：

这会导致 GET 错误：Cannot GET /theme. 我猜它会查找theme.html，然后在找不到任何内容时抛出错误。

有人对在 StyleGuide 服务器中使用 react-router-dom 有任何提示吗？

感谢您的任何提示

我想要的是：

我正在尝试将动态主题选项添加到我正在处理的react-styleguidist项目中。按照这个未完成且已关闭的 pr中提出的想法，我添加了一个自定义ThemeSwitcher组件，它是一个呈现在目录侧边栏中的选择菜单。选择一个选项应该更新brand上下文，它使用 styled-components' 呈现相应的主题BrandProvider。它应该像封闭的 pr 中包含的演示一样运行：https ://fancy-sg.surge.sh/ 。

什么不起作用：

我无法访问我在和中提供和更新的相同ThemedWrapper上下文。检查 React Components 控制台中的树，看起来 react-styleguidist 可能会在.StyleguideWrapperThemeSwitcherReactExample StyleguideRenderer

假设我对由于上下文ThemedWrapper位于外部而没有更新的上下文是正确的StyleGuideRenderer，我有两个高级想法（但无法弄清楚如何去做）是：

1. 在 react-styleguidist 库中找到作为两者的祖先的正确组件，StyleGuideRenderer 并 在那里添加，以便现在可以访问上下文ReactExampleBrandProviderThemedWrapper
2. 我还没有找到的其他一些上下文配置将允许两个组件在没有提供者作为祖先的情况下使用相同的上下文（这可能吗？？）

我有的：

这是我正在使用的相关代码的精简版本。

brand-context.js（导出上下文和提供者，受Kent C Dodds启发

StyleGuideWrapper.jsx（rsg-components/StyleguideRenderer 的副本，添加了 ThemeSwitcher 组件以从 ui 切换主题；在 styleguide 配置中传递为StyleGuideRenderer）

ThemeSwitcher.jsx

ThemedWrapper.jsx（在 styleguide 配置中作为 传递Wrapper，并包装每个示例组件以将它们提供给 styled-components）

我正在 formik 上制作一个表格，并希望它占据全屏宽度。我试过 flex: 1，改变 flex 方向，改变 padding。当文本比输入字段更宽时，它会扩展以适应它。我不想设置宽度，因为我希望它随着手机屏幕的宽度而变化。这是现在的样子https://i.stack.imgur.com/wuwC9.png

这是我的样式代码：

输入字段如下所示：

目前，Styleguidist 使用 ReactExample 来渲染组件。我想用我的自定义主题提供程序将所有 ReactExample 组件包装在一个页面中。正如您在下面看到的，所有 ReactExample 组件都位于根 Styleguide 组件之外。

有没有办法让我配置或修改 styleguidist 以添加一个父组件来包装 styleguidist 的所有组件？

在这两个库的帮助下，我使用了很多 svg 图像

然后我可以像下面这样导入和使用 svg 图像。

下面是我的自定义按钮

我正在使用上面的组件，如下所示

如果您查看上面代码中的虚部。通过这种方式，我可以在组件内显示 svg 图像。但是，我需要将 svg 图像显示为如下所示的道具。

如何将 svg 路径作为道具传递并在组件内显示？

我正在一个网站上工作，我正在考虑将styleguidist其用作我们文档的解决方案。

但是，如果我尝试为使用 渲染的组件制作文档ReactDOM.render()，styleguidist最终会显示“编译成功！” 但页面渲染失败。我什至知道为什么会发生这种情况，但除了排除这些文件之外，我想不出任何解决方法。有任何想法吗？

注意：我们使用渲染组件，因为我们需要将它们渲染到 php 模板中。

例子：

结果：

我想使用 vue-styleguidist 来记录我的组件。决定从陀螺开始。组件的预览显示正确，但代码示例的格式不符合我的预期（查看https://vue-styleguidist.github.io/basic/#button以获取参考）。

如何解决？

在我的应用程序 app.js 中，出于某种原因，我在我的反应头盔中加载了引导 CSS，但在加载组件自定义样式之后加载。所以我的一些覆盖样式不起作用。如何在组件之前加载 react-helmet CSS？请帮助我

应用程序.js

所以需要在加载 home 组件之前加载 bootsrap.css。