@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 数组。
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
中,而不是重新创建一个。
为了与 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 中会出现一个工具栏菜单,用于为你故事选择所需的主题。
现在你已经准备好在 Storybook 中使用 Emotion 了。🎉
如果你在工作中使用 Emotion,我们非常乐意你帮助我们改进此设置。加入 Discord 中的维护者社区来参与贡献,或查阅插件文档。