加入直播会话:美国东部时间周四上午 11 点,Storybook 9 发布及 AMA

主题

在 Storybook 中为你的组件切换多个主题

在 Github 上查看

@storybook/addon-themes

Storybook Addon Themes 可用于在 Storybook 的预览中为组件切换多个主题。

React Storybook Screenshot

用法

需要 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' },
};
贡献者
  • ndelangen
    ndelangen
  • shilman
    shilman
  • tmeasday
    tmeasday
  • ghengeveld
    ghengeveld
  • winkervsbecks
    winkervsbecks
  • yannbf
    yannbf
支持
    Angular
    Ember
    HTML
    Marko
    Mithril
    Preact
    Rax
    React
    Riot
    Svelte
    Vue
    Web Components
标签