参加直播:周四 美国东部时间上午 11 点,Storybook 9 发布及 AMA(问答)
返回集成页
@emotion/styled

集成Emotion与 Storybook

Emotion 是一个 css-in-js 框架,用于构建快速实用的组件。
前提条件

本指南假设你已拥有使用 Emotion 的 React 应用,并且刚按照入门指南设置了 Storybook >=7.0。没有这些?请按照 Emotion 的安装说明进行操作,然后运行

# Add Storybook:
npm create storybook@latest

1. 添加 @storybook/addon-themes

首先,你需要安装 @storybook/addon-themes

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

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

在底层,它运行 npx @storybook/auto-config themes,该命令会读取你的项目并尝试使用正确的 decorator 配置你的 Storybook。如果直接运行该命令无法解决你的问题,请在 @storybook/auto-config 仓库上提交 bug,以便我们进一步改进它。要手动添加此插件,请安装它,然后将其添加到 .storybook/main.ts 文件中的 addons 数组。

2. 提供 GlobalStyles

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

// .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 decorator。

// .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 prop 获取主题,同时获得继承自 <Global /> 的样式。

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

Completed Emotion example with theme switcher

参与贡献

现在你已经准备好在 Storybook 中使用 Emotion 了。🎉

如果你在工作中使用 Emotion,我们非常乐意你帮助我们改进此设置。加入 Discord 中的维护者社区来参与贡献,或查阅插件文档

标签
贡献者
  • ShaunEvening
    ShaunEvening