markrebec/storybook-addon-styled-component-theme

storybook addon

This addon allows storybook to showcase components with multiple different styled-component themes. Supports storybook v4, v5 and newer

Installation

yarn add storybook-addon-styled-component-theme --dev

Configuration

Register the addon in .storybook/main.js

module.exports = {
  stories: ["../src/**/*.stories.(tsx|mdx)"],
  addons: ["storybook-addon-styled-component-theme/dist/register"]
};

Add decorator to stories in .storybook/preview.js

import { addDecorator } from "@storybook/react";
import { withThemesProvider } from "storybook-addon-styled-component-theme";

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

Legacy configuration v.5.2 and v.4

Add to .storybook/addons.js

// v1.3, storybook v5.2
import "storybook-addon-styled-component-theme/dist/register";

// v1.2, storybook v4, v5.0
import "storybook-addon-styled-component-theme/dist/src/register";

addDecorator to .storybook/config.js

import { addDecorator } from "@storybook/react";
import { withThemesProvider } from "storybook-addon-styled-component-theme";

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

or

addDecorator to stories

import { withThemesProvider } from "storybook-addon-styled-component-theme";

const themes = [theme1, theme2];

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

Remind

Make sure every theme object has a name property

Contributing

Build local library

yarn

yarn build

Start the local example

cd example

yarn

yarn storybook

Run all the spec

yarn test