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

主题提供程序插件

用于管理由 Styled components、Emotion 或任何其他基于 React 组件的解决方案提供的全局主题的 Storybook 插件。兼容 Storybook 7 和 8 版本

在 Github 上查看

Storybook 主题提供程序插件

storybook addon npm version npm GitHub package.json dynamic GitHub Repo stars

维护者对用户的个人呼吁

大家好,我叫 Dima。我创建了这个 Storybook 插件。感谢您在项目中使用它。希望它能帮助您实现目标和想法。

目前我正在德国柏林寻找一份技术负责人/高级前端开发的工作。如果您的公司有相关需求,我希望能得到您的内推。您可以在这里找到我的简历和作品集。如果内推不相关,给插件仓库加个星🌟也是对我很大的鼓励。我相信拥有一个受欢迎的开源项目对找工作有所帮助。

谢谢,祝您编程愉快!

介绍

该插件用于管理由 Styled components、Emotion 或任何其他基于 React 组件(接收 prop theme?: Record<string, unknown> 和 children 节点)的解决方案提供的全局主题。此插件兼容 Storybook 7 和 8 版本

灵感来源于 storybook-addon-themes

安装

  1. 使用您选择的包管理器安装插件。
npm i -D storybook-addon-theme-provider
yarn add -D storybook-addon-theme-provider
pnpm i -D storybook-addon-theme-provider
  1. .storybook/main.(js|ts) 中注册插件
export default {
    //...
    addons: [
        //...
        "storybook-addon-theme-provider",
        //...
    ],
};

使用主题

将装饰器 withThemeProvider 添加到 .storybook/preview.(js|ts)。这会在全局层面应用主题设置。

import {withThemeProvider} from 'storybook-addon-theme-provider';
import {Provider} from './Provider';

export default {
    //...
    decorators:[
        withThemeProvider(Provider),
        ///...
    ],
    globals: {
        // Set initially selected theme name
        selectedTheme: 'foo',
        // Provide a list of available themes
        themes: [
            {
                // Provide a name for the theme.
                name: 'foo',
                // Set a color to display after theme name
                color: 'red',
                // Provide object with foo theme data
                themeObject: {
                    baseColor: 'red',
                    //...
                }
            },
            {
                name: 'bar',
                color: '#AAAAAA',
                themeObject: {
                    baseColor: 'green',
                }
            }
        ]
    },
    //...
}

也可以在故事级别启用装饰器。

// some CSF story file

export const story = {
  decorators: [withThemeProvider(Provider)]
};

使用 Provider 组件

Provider 是一个 React 组件,它接收 theme prop(包含选定的主题对象)和 children 节点。请参阅Styled component 主题Emotion ThemeProvider

开发者也可以使用自定义的 Provider 组件。

import React, {ReactNode} from 'react';

export const Provider = <TTheme,>({children, theme}: {children?: ReactNode; theme?: TTheme}) => {
    // apply theme somehow
    console.log('theme', theme)
    return <div>{children}</div>
}