storybook-addon-styles

storybook-addon-styles

Storybook addon to add styles to preview window

Installation

npm install --save-dev storybook-addon-styles

or

yarn add storybook-addon-styles --dev

Usage

Add the withStyles decorator, either in your global config file, or to a group of stories.

import { configure, addDecorator } from '@storybook/react';
import { withStyles } from 'storybook-addon-styles/react'
 
addDecorator(withStyles)
 
// ...rest of your configuration

Then, you can add parameters to add styles to a group of stories. The addon takes a JavaScript object of camelCased style properties, which will be applied to a wrapper around the content of the preview window.

import { storiesOf } from '@storybook/react'
import MyComponent from './MyComponent'
 
storiesOf('MyComponent')
  .addParameters({
    // Add 40px of padding around preview window
    styles: { padding: '40px' }
  })
  .add('default', () => <MyComponent />)
  .add('with props', () => <MyComponent value="Some value" />)

Or to individual stories:

import { storiesOf } from '@storybook/react'
import MyComponent from './MyComponent'
 
storiesOf('MyComponent')
  // Add 40px of padding just in this story
  .add('default', () => <MyComponent />, { styles: { padding: '40px' } })
  .add('with props', () => <MyComponent value="Some value" />)

Global configuration

You can also add parameters in your global config file to add styles to all stories. You can still override these styles later with parameters in individual stories if you need to.

import { configure, addDecorator, addParameters } from '@storybook/react';
import { withStyles } from 'storybook-addon-styles/react'
 
// Add styles as options when adding the decorator...
addDecorator(withStyles({
  fontFamily: "'Roboto', Helvetica, sans-serif"
  padding: '40px'
}))
 
// ...and/or with parameters
addParameters({
  styles: {
    border: '1px solid black'
  }
})
 
// ...rest of your configuration

Framework support

storybook-addon-styles is currently supported in React and Vue. Feel free to add an issue if you'd like support for another framework.