Storybook Addon 颜色方案
在指定的颜色方案中预览和渲染你的 stories
安装
首先,安装软件包。
npm install --save-dev storybook-addon-color-scheme
然后,在 .storybook/main.js
中将其注册为插件。
// .storybook/main.ts
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
// ...rest of config
addons: [
'@storybook/addon-essentials'
'storybook-addon-color-scheme', // 👈 register the addon here
],
};
export default config;
使用方法
使用此插件的主要方法是定义 colorScheme
参数。你可以在组件级别(如下所示)定义它,以影响文件中的所有 stories,或者只为一个单独的 story 定义。
// Button.stories.ts
// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';
import { Button } from './Button';
const meta: Meta<typeof Button> = {
component: Button,
parameters: {
colorScheme: "dark",
},
};
export default meta;