@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
• 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' },
};