85,947
返回集成
styled-components

集成Styled Components与 Storybook

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

本指南假设你已经有一个使用 styled-components 的 React 应用，并且已经按照入门指南设置了 Storybook >= 7.0。 还没有设置？ 请按照 styled-components 的安装说明进行安装，然后运行

# Add Storybook:
npm create storybook@latest

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 文件中的 addons 数组中。

2. 提供 GlobalStyles

在 .storybook/preview.js 文件中，创建一个包含 font-family 的 <GlobalStyles /> 组件。 然后通过将其添加到 decorators 数组中，使用 withThemeFromJSXProvider 装饰器将其应用于你的 stories。

// .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 中将出现一个工具栏菜单，用于为你的 stories 选择所需的主题。

参与进来

现在你已经准备好将 styled-components 与 Storybook 一起使用了。 🎉

如果你在工作中使用 styled-components，我们很希望你能帮助我们让这个设置更简单。 加入 Discord 中的维护者以参与进来，或者查看插件文档。

标签
贡献者
  • ShaunEvening
    ShaunEvening