Storybook/Addon：带有主题的样式化组件

用于主题提供程序的样式化组件的 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 文件