84,593
返回集成
@emotion/styled

集成Emotion与 Storybook

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

此方案假设您有一个使用 Emotion 的 React 应用，并且刚刚使用入门指南设置了**Storybook >=7.0**。没有？请按照 Emotion 的安装说明操作，然后运行

# Add Storybook:
npx storybook@latest init

1. 添加 @storybook/addon-themes

要开始，您需要安装@storybook/addon-themes。

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

npx storybook@latest add @storybook/addon-themes
配置脚本失败了吗？

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

2. 提供 GlobalStyles

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

// .storybook/preview.jsx
 
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { Global, css } from '@emotion/react';
 
const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
    `}
  />
);
 
export const decorators = [
  withThemeFromJSXProvider({
    GlobalStyles, // Adds your GlobalStyles component to all stories
  }),
];

如果您已经在应用程序中拥有<Global />，则可以将其导入到.storybook/preview.js中，而不是重新创建它。

3. 提供您的主题

要与 Storybook 中的组件共享您的主题，您需要将它们与@emotion/styled的<ThemeProvider />组件一起提供给withThemeFromJSXProvider装饰器。

// .storybook/preview.jsx
 
import { withThemeFromJSXProvider } from '@storybook/addon-themes';
import { Global, css, ThemeProvider } from '@emotion/react';
 
import { lightTheme, darkTheme } from '../src/themes';
 
const GlobalStyles = () => (
  <Global
    styles={css`
      body {
        font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
    `}
  />
);
 
export const decorators = [
  withThemeFromJSXProvider({
  themes: {
    light: lightTheme,
    dark: darkTheme,
  }
  defaultTheme: 'light',
  Provider: ThemeProvider,
  GlobalStyles,
})];

现在，使用 Emotion 制作的组件将通过theme道具获取主题，以及从<Global />继承的样式。

当您提供多个主题时，Storybook UI 中将出现一个工具栏菜单，用于为您的故事选择所需的主题。

Completed Emotion example with theme switcher

参与进来

现在您已准备好使用 Emotion 和 Storybook。🎉

如果您在工作中使用 Emotion，我们希望您能帮助我们改进此设置。加入Discord中的维护者参与进来，或跳转到插件文档。

标签
贡献者
  • ShaunEvening
    ShaunEvening