Storybook Addon Styled Themes
Greatly inspired by Tonai's Storybook Addon Themes.
This Storybook Theme Decorator can be used to add a custom styles to the the preview in Storybook.
This addon works with Storybook for:
Installation
npm i --save storybook-addon-styled-themes
Configuration
Then create a file called addons.js
in your storybook config.
Add following content to it:
import 'storybook-addon-styled-themes/register';
Usage
Then write your stories like this:
import React from 'react';
import { storiesOf } from "@storybook/react";
import withThemes from "storybook-addon-styled-themes";
storiesOf("Button", module)
.addDecorator(withThemes([
{ name: "MyStyle", src: "/your/style/route.less", color: "#00aced", default: true },
{ name: "MyOtherStyle", src: "/your/other/style/route.css", color: "#3b5998" },
]))
.add("with text", () => <button>Click me</button>);
This will load into DOM (by require()) your styles.