Add custom styles to the storybook preview panel
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
AUTHORS
LICENSE
README.md
package.json
storybook-styles.png

README.md

Storybook styles

This storybook decorator allows you to add custom styles to the storybook preview panel.

Screenshot of a styles storybook preview

Getting Started

npm install --save @sambego/storybook-styles

Then write your stories like this:

import React from 'react';
import { storiesOf } from "@storybook/react";
import styles from "@sambego/storybook-styles";

storiesOf("Button", module)
  .addDecorator(styles({
    fontFamily: 'Helvetica, Arial, sans-serif',
    background: '#e1ecfa',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    height: '500px',
  }))
  .add("with text", () => <button>Click me</button>);

The style decorator accepts a JavaScript object with camelCased style properties which will be applied around the content of the preview area.