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

带有 emotion 主题的 storybook 插件

在 Github 上查看

此包已弃用

此包已不再维护,并已停止活跃开发。

安装

yarn add storybook-addon-emotion-theme --dev

添加到 .storybook/addons.js

import 'storybook-addon-emotion-theme/dist/register';

将 addDecorator 添加到 .storybook/config.js

import { addDecorator } from '@storybook/react';
import { withThemesProvider } from 'storybook-addon-emotion-theme';

const themes = [theme1, theme2];
addDecorator(withThemesProvider(themes));

或者

将 addDecorator 添加到 stories

import {withThemesProvider} from 'storybook-addon-emotion-theme';

const themes = [theme1, theme2];

storiesOf("demo", module)
  .addDecorator(withThemesProvider(themes))
  .add("demo div", () => <div>DEMO</div>);

提醒

请确保每个主题都有一个 name 属性。例如

const myTheme = {
  name: "Light",
  primaryColor: "blue"
}

这用于在 Storybook UI 中显示。

贡献

yarn

yarn build

yarn example

鸣谢

感谢 Carlos 制作了 storybook-addon-styled-component-theme,此库正是在此基础上构建的。