加入直播会话:周四,美国东部时间上午 11 点,Storybook 9 发布与 AMA

样式表切换

一个用于在样式表之间切换的 Storybook 插件。

在 Github 上查看

此仓库已归档。

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,您现在应该会看到一个画笔菜单,允许您在已配置的样式表之间切换。第一个样式表将默认应用。

制作方
  • flightstats
    flightstats
兼容
    Angular
    React
    Vue
标签