@storybook/addon-themes

Storybook 擴充套件主題可用於在 Storybook 的預覽中切換元件的多個主題。

用法

需要 Storybook 7.0 或更高版本。如果您需要將其添加到 Storybook 中，可以執行

npm i -D @storybook/addon-themes

然後，將以下內容添加到 .storybook/main.js

export default {
  addons: ['@storybook/addon-themes'],
};

👇 工具特定設定

有關工具特定設定，請查看以下配方

• @emotion/styled
• @mui/material
• bootstrap
• postcss
• styled-components
• tailwind
• vuetify@3.x

沒看到您喜歡的工具？別擔心！這並不表示此擴充套件不適合您。請查看 API 參考的「撰寫自訂裝飾器」章節。

❗️ 覆寫主題

如果您想為特定元件或故事覆寫主題，可以使用 globals.theme 參數。

import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
  // meta level override
  globals: { theme: 'dark' },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const PrimaryDark = {
  args: {
    primary: true,
    label: 'Button',
  },
  // story level override
  globals: { theme: 'dark' },
};