Storybook 主题/样式表切换器插件
描述
这个插件可以让你轻松切换 CSS 文件中声明的多个主题。如果你在不同的文件中有多个主题,这在 Tailwind CSS 中尤其有用。
此外,每次切换主题时,你的 URL 会更新一个查询参数,指向当前选定的主题。
致谢
这个想法和部分代码灵感来源于 storybook-stylesheet-toggle 插件。
开始使用
安装包
npm i storybook-theme-switch-addon
将此插件添加到你的 .storybook/main.(js,ts)
文件中
module.exports = {
addons: ["storybook-theme-switch-addon"],
};
通过在 preview 对象中添加 globalTypes 来配置你的主题,位于 .storybook/preview.(js,ts)
文件中
globalTypes: {
stylesheets: {
themes: [
{
id: "primary-theme",
title: "Primary theme",
url: "./primary-theme.css",
},
{
id: "secondary-theme",
title: "Secondary theme",
url: "./secondary-theme.css",
},
{
id: "tertiary-theme",
title: "Tertiary theme",
url: "./tertiary-theme.css",
},
],
},
},
记住配置你的 storybook 以服务 public
目录下的静态文件
const config: StorybookConfig = {
{...options},
staticDirs: ["../public"],
};
开发脚本
yarn start
以监听模式运行 babel 并启动 Storybookyarn build
构建并打包你的插件代码