storybook-addon-styled-themes

0.0.3 • Public • Published

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.

Package Sidebar

Install

npm i storybook-addon-styled-themes

Weekly Downloads

4

Version

0.0.3

License

MIT

Unpacked Size

25.2 kB

Total Files

14

Last publish

Collaborators

  • espinacs