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 中新增參數到 stories

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 中新增裝飾器到 stories

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

授權條款

本專案使用 MIT 授權條款 - 詳細內容請參閱 LICENSE.md 檔案