@storybook/addon-themes

Storybook Addon Themes 可用于在 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
• [email protected]

没有看到您喜欢的工具？别担心！这并不意味着此插件不适合您。请查看 "编写自定义装饰器" 部分的 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' },
};