集成Styled Components与 Storybook
1. 添加 @storybook/addon-themes
运行以下脚本来安装并注册该插件
npx storybook@latest add @storybook/addon-themes这将运行一个配置脚本，引导您完成插件的设置。在提示时，请从配置选项中选择 styled-components。
配置脚本失败了吗？
在后台，这会运行 npx @storybook/auto-config themes，它会读取您的项目并尝试使用正确的装饰器配置您的 Storybook。如果直接运行该命令不能解决您的问题，请在 @storybook/auto-config 仓库中提交 bug，以便我们进一步改进。要手动添加此插件，请先安装它，然后在您 .storybook/main.ts 的插件数组中添加它。
2. 提供 GlobalStyles
在 .storybook/preview.js 中，创建一个包含 font-family 的 <GlobalStyles /> 组件。然后通过将其添加到 decorators 数组中，使用 withThemeFromJSXProvider 装饰器将其应用于您的 story。
// .storybook/preview.jsx
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { createGlobalStyle } from 'styled-components';
const GlobalStyles = createGlobalStyle`
body {
font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
`;
export const decorators = [
withThemeFromJSXProvider({
GlobalStyles, // Adds your GlobalStyle component to all stories
}),
];如果您已经在应用中拥有 <GlobalStyles />，则可以将其导入到 .storybook/preview.js 中，而不是重新创建它。
3. 提供您的主题
要与 Storybook 中的组件共享您的主题，您需要将它们与 withThemeFromJSXProvider 装饰器一起提供，以及 styled-components 的 <ThemeProvider /> 组件。
// .storybook/preview.jsx
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { lightTheme, darkTheme } from '../src/themes';
/* snipped for brevity */
export const decorators = [
withThemeFromJSXProvider({
themes: {
light: lightTheme,
dark: darkTheme,
}
defaultTheme: 'light',
Provider: ThemeProvider,
GlobalStyles,
})];当您提供多个主题时，Storybook UI 中将出现一个工具栏菜单，用于选择您想要为故事使用的主题。
参与进来
现在您已准备好将 styled-components 与 Storybook 结合使用。🎉
如果您在工作中也使用 styled-components，我们非常希望您能帮助我们使此设置更加简便。加入我们在 Discord 的社区，参与其中，或者查看 插件文档。
- ShaunEvening
