Skip to content

Latest commit

 

History

History
 
 

cssresources

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

Storybook Addon Cssresources

Storybook Addon Cssresources to switch between css resources at runtime for your story Storybook.

Framework Support

Storybook Addon Cssresources Demo

Installation

yarn add -D @storybook/addon-cssresources

Configuration

Then create a file called main.js in your storybook config.

Add following content to it:

module.exports = {
  addons: ['@storybook/addon-cssresources'],
};

Usage

You need add the all the css resources at compile time using the withCssResources decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon UI:

import { withCssResources } from '@storybook/addon-cssresources';

export default {
  title: 'CssResources',
  parameters: {
    cssresources: [
      {
        id: `bluetheme`,
        code: `<style>body { background-color: lightblue; }</style>`,
        picked: false,
        hideCode: false, // Defaults to false, this enables you to hide the code snippet and only displays the style selector
      },
    ],
  },
  decorators: [withCssResources],
};

export const defaultView = () => <div />;