主题提供程序插件
用于管理由 Styled components、Emotion 或任何其他基于 React 组件的解决方案提供的全局主题的 Storybook 插件。兼容 Storybook 7 和 8 版本
Storybook 主题提供程序插件
维护者对用户的个人呼吁
大家好,我叫 Dima。我创建了这个 Storybook 插件。感谢您在项目中使用它。希望它能帮助您实现目标和想法。
目前我正在德国柏林寻找一份技术负责人/高级前端开发的工作。如果您的公司有相关需求,我希望能得到您的内推。您可以在这里找到我的简历和作品集。如果内推不相关,给插件仓库加个星🌟也是对我很大的鼓励。我相信拥有一个受欢迎的开源项目对找工作有所帮助。
谢谢,祝您编程愉快!
介绍
该插件用于管理由 Styled components、Emotion 或任何其他基于 React 组件(接收 prop theme?: Record<string, unknown>
和 children 节点)的解决方案提供的全局主题。此插件兼容 Storybook 7 和 8 版本。
灵感来源于 storybook-addon-themes。
安装
- 使用您选择的包管理器安装插件。
npm i -D storybook-addon-theme-provider
yarn add -D storybook-addon-theme-provider
pnpm i -D storybook-addon-theme-provider
- 在
.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>
}