此套件已過時

此套件不再維護，已停止積極開發。

安裝

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，本程式庫即以此為基礎。