Storybook - 如何使用样式组件（React + TS）从外部项目导入组件？

Posted 2023-03-15

【中文标题】Storybook - 如何使用样式组件（React + TS）从外部项目导入组件？

【英文标题】：Storybook - How to import a component from a external project using styled-components (React + TS)?

【发布时间】：2021-05-09 13:26:22

【问题描述】：

我正在尝试将外部项目中的组件导入到我的故事书中。我导入了它，例如，一个自定义按钮，但没有呈现样式，它只显示默认的 html 按钮样式而不是我的样式组件。

我也尝试将它导入到 .storybook/preview.js 中，就像其他 scss 文件和引导库一样，但仍然没有呈现 styled-components 样式。

import Button from "..filelocation"

【参考方案1】：

对于故事书，您可以通过创建.storybook/preview-head.html 文件并通过 css 在其中添加您的 css 来制作全局（故事书文件夹）css 样式。来源：https://storybook.js.org/docs/react/configure/styling-and-css

但是，您也可以在故事书组件中添加一个 styles.css 并使用 import './styles.css'; 调用它

【讨论】：

嗨，Css 和 scss 不是我导入它们的问题，它们工作正常。但是如何导入 styled-components 的样式呢？例如，我导入了一个按钮样式组件，但它没有应有的样式。例如，我设置了边框颜色：红色，它只显示了普通的 html - 基本按钮。

也许这个配置会帮助storybook.js.org/docs/react/configure/…，我使用的是 postcss 而不是 sass-loader。尝试测试：/\.css$/，使用：['style-loader', 'css-loader'],

hm，实际上我的 main.js 文件（在 .storybook 内部）中有相同的内容，但仍然没有呈现样式。我尝试在故事书项目中创建样式化组件，并且它们得到正确渲染，但是当我从不同的项目中导入它们时它不起作用。我还尝试从另一个项目中导入主题提供程序，并为故事书提供全局主题，但仍然没有。谢谢