加入直播:周四,美国东部时间上午 11 点,Storybook 9 发布及问答 (AMA)

用于 styled components 并带有主题提供程序的 Storybook 插件

在 Github 上查看

Storybook/插件:带有主题的 styled-components

用于 styled components 并带有主题提供程序的 Storybook 插件

入门指南

安装

yarn add storybook-addon-styled-components-themes --D

配置

在 .storybook/main.js 中注册插件

module.exports = {
  stories: ['../src/**/*.stories.(tsx|mdx)'],
  addons: ['storybook-addon-styled-components-themes/register']
};

在 .storybook/preview.js 中为故事添加参数

addParameters({
  styledComponentsThemes: {
    /**
     * Themes
     */
    themes: [ThemeA, ThemeB],
    /**
     * Theme to start on - index - optional
     */
    initialTheme: 1, // optional
    /**
     *  Key for show name of theme - optional
     */
    label: 'name', // optional
  },
});

在 .storybook/preview.js 中为故事添加装饰器

addDecorator(story => (
    <WithThemeProvider>
        {story()}
    </WithThemeProvider>
));

许可

本项目根据 MIT 许可证获得许可 - 有关详细信息,请参阅 LICENSE.md 文件