此儲存庫已封存。

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，您現在應該會看到一個畫筆選單，讓您可以在您配置的樣式表之間切換。預設會套用第一個樣式表。