84,593
返回集成
styled-components

集成Styled Components与 Storybook

Styled Components 是一个 css-in-js 框架，用于构建快速且功能强大的组件。
先决条件

此食谱假设您有一个使用 styled-components 的 React 应用程序，并且刚刚使用 入门指南 设置了 Storybook >=7.0。没有？请遵循 styled-components 的 安装说明，然后运行

# Add Storybook:
npx storybook@latest init

1. 添加 @storybook/addon-themes

运行以下脚本以安装并注册插件

npx storybook@latest add @storybook/addon-themes

这将运行一个配置脚本，该脚本将引导您完成插件的设置。当被提示时，从配置选项中选择 styled-components。

配置脚本失败了吗？

在幕后，这将运行 npx @storybook/auto-config themes，它应该读取您的项目并尝试使用正确的装饰器配置您的 Storybook。如果直接运行该命令无法解决您的问题，请在 @storybook/auto-config 存储库上提交错误，以便我们能够进一步改进它。要手动添加此插件，请安装它，然后将其添加到您的 .storybook/main.ts 中的插件数组中。

2. 提供 GlobalStyles

在 .storybook/preview.js 中，创建一个包含 font-family 的 <GlobalStyles /> 组件。然后使用 withThemeFromJSXProvider 装饰器将其应用于您的故事，方法是将其添加到 decorators 数组中。

// .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 中将出现一个工具栏菜单，用于选择您希望用于故事的主题。

参与

现在您已准备好使用 Storybook 中的 styled-components。🎉

如果您在工作中使用 styled-components，我们希望您能帮助我们使这种设置更加容易。加入 Discord 中的维护者以参与，或者跳到 插件文档。

标签
贡献者
  • ShaunEvening
    ShaunEvening