Storybook 样式表切换
一个简单的 Storybook 插件,允许你定义一组样式表并进行切换。这在你的项目有多个主题时非常有用,或者当你希望在不同的样式环境中对你的组件进行压力测试时。
入门指南
yarn add -D storybook-stylesheet-toggle
在 .storybook/main.js
中安装插件
module.exports = {
addons: ["storybook-stylesheet-toggle"],
};
将以下配置添加到 .storybook/preview.js
import { addParameters } from '@storybook/react';
addParameters({
stylesheetToggle: {
stylesheets: [
{
id: 'first',
title: 'First stylesheet',
url: 'path/to/first-sheet.css',
},
{
id: 'second',
title: 'Second stylesheet',
url: 'path/to/second-sheet.css',
},
],
},
});
确保你的样式表路径被 Storybook 服务(使用 -s ./path
参数)。
启动 Storybook 后,你应该会看到一个画笔菜单,允许你在配置的样式表之间切换。第一个样式表将默认应用。