@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'],
};
👇 特定工具配置
有关特定工具的设置,请查看下面的使用指南
没有看到你喜欢的工具?别担心!这并不意味着这个插件不适合你。请查阅 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' },
};