Package Exports

@storybook/addon-cssresources

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/addon-cssresources) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 addons.js in your storybook config.

Add following content to it:

import '@storybook/addon-cssresources/register';

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 from @storybook/X where X is your framework
import { configure, addDecorator, addParameters, storiesOf } from '@storybook/react';
import { withCssResources } from '@storybook/addon-cssresources';

// global
addDecorator(withCssResources)
addParameters({
  cssresources: [{
      id: `bluetheme`,
      code: `<style>body { background-color: lightblue; }</style>`,
      picked: false,
    },
  ],
});

You can use the `cssresources` parameter to override resources on each story individually:

// per story
storiesOf('Addons|Cssresources', module)
  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>, {
      cssresources: [
        {
          id: `fontawesome`,
          code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
          picked: true,
        }, {
          id: `whitetheme`,
          code: `<style>.fa { color: #fff }</style>`,
          picked: true,
        },
      ],
  });