问题标签 [react-styleguidist]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - React Native Flex 样式问题
在此设置中无法让文本和图像并排排列： https ://snack.expo.io/XZef1XEje
添加width到topHomeTextContainer实际上有助于排列元素吗？我尝试添加一个额外的<View />，但没有做任何事情。
如果链接失效：
更新 1：为图像添加了宽度和高度。
reactjs - 尝试通过更改状态挂钩来更改 React Style 属性
Transform 不会更新下面的样式组件。我已经控制台记录了状态以确保它正在发生变化，而不是样式组件（它保持红色）。
material-ui - React Styleguidist 包装器 - 模块解析失败：意外令牌
我正在尝试将包装器添加到 Styleguidist 以将我的组件包装在 Material UIThemeProvider中，但 Styleguidist 对包装器文件的解析失败。我在这个项目中使用了 create-react-app。
styleguide.config.js：
StyleguidistMuiThemeWrapper.jsx：
theme.jsx：
当我尝试编译 Styleguidist 时，我得到了这个：
如果我将包装文件扩展名更改为.jsx（并更新路径styleguide.config.js），我会得到一个不同的错误：
如果不从 create-react-app 中弹出，我就无法修改我的 Babel 配置，这是我想避免的。
我能做些什么？
我一直依赖文档的这一部分。
react-native - 从 React Native 应用程序创建自己的 Web 文档
有没有办法为 React Native 应用程序创建文档（如 reactnative.dev / react-styleguidist）？
javascript - React Styleguidist 开始 slooooooow
我们使用https://react-styleguidist.js.org/来开发和展示组件以供重用。我们已经使用它几年了，由 JS 和 TS 文件组成。以 开始时styleguidist server，项目速度慢得令人难以忍受（大约 4 分钟）。我尝试了很多方法来加快速度，但似乎没有任何区别。
我尝试了这种解决方法react-docgen-typescript，但没有明显改善。
我试了一下官方配置...
我试着skipLibCheck: true从这个建议tsconfig.json开始......
奇怪的是，仅使用默认值propsParser而不使用react-docgen-typescript. 但并不是所有的道具都包含在生成的文档中。
所以我真的没有想法......我们的风格指南是建立在 CRA v4.0.1 之上的。也许CRA是问题所在？或者问题可能是我们的样式指南同时具有 JS 和 TS 文件，这在某种程度上“混淆”了 TS 编译器......？
非常欢迎任何帮助、建议或建议...
包.json
tsconfig.json
styleguide.config.js
webpack - 如何使用 CRACO Webpack 配置使用 Tailwind CSS 构建 React Styleguidist？
[解决了]
问题
如其文档中所述，将 Tailwind CSS 与 CRA (create-react-app) 一起使用需要替换react-scripts为craco.
现在，我正在尝试使用 React Styleguidist 构建一个组件库。styleguidist server通过在 craco 的 API 中指定styleguide.config.js使用 craco webpack 配置文件，我能够让 Tailwind CSS 在运行时在 localhost 中正确显示，如下所示
但是，当我尝试使用 构建生产 HTML 时styleguidist build，它会抛出这些错误
我能够通过使用来自 react-scripts 的配置运行命令来构建没有错误，就像这样
npx styleguidist build --config ./node_modules/react-scripts/config/webpack.config.js
我在这里成功地将它部署到 Vercel https://react-components-fho7l1ov3-discover-pom.vercel.app/ 但是我的样式都没有正确显示并且tailwindcss没有得到应用
我试过查看里面的文件，./node_modules/@craco/craco/lib/features/webpack/babel.js但我不明白问题可能是什么......
里面./node_modules/react-refresh/cjs/react-refresh-babel显示了抛出的错误，但老实说我不知道它为什么抱怨
解决方案
我想到了。发布以防其他人遇到此问题。我不得不像这样使用 craco 的 webpack 配置的 prod 版本
styleguidist build现在完美运行。
javascript - jsconfig.json 允许在 React 中进行绝对导入，但会破坏 Styleguidist 导入
我jsconfig.json在整个 Create-React-App 中使用绝对导入。有没有办法让 Styleguidist 正确遵守文件定义的绝对导入jsconfig.json？它在我的 React 应用程序中运行良好，但是当 Styleguidist 解析器尝试读取.js文件并遇到这些绝对导入之一时，它无法正确定位它。
jsconfig.json
/src/components/Foo.js
Styleguidist 终端：
请知道我已尝试将 移动styleguide.config.js到/src目录中以在该配置和jsconfig.json. 它没有解决问题。
html - 如何在 react-styleguidist 中包含 Material Icons
我正在尝试在我的react-styleguidist文档中使用 Google Material Icons。在我的 styleguide.config.js 文件中，我尝试过
然后添加<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> 到<head>template.html 文件的标签中，但 react-styleguidist 似乎不再识别这种格式。
我尝试使用如下模板和主题：
这只是以文字而不是实际图标显示图标名称。我认为这种方法仅适用于 Roboto 等实际字体。任何帮助将不胜感激。
reactjs - 反应原生边框 Css
我是 react-native 的初学者。我正在尝试设计如下图所示。但不能制作红色标记的部分。任何人都可以通过说我应该使用什么 CSS 属性来设计这部分来帮助我解决这个问题吗？我知道我必须使用border-radius，但无法找到其他属性来制作像给定图像一样的适当设计。
css - React Native Circle 进度条
我应该使用哪个属性来制作这个圆形进度条？