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 文件