Storybook Addon Cssresources to switch between css resources at runtime for your story Storybook.
yarn add -D @storybook/addon-cssresourcesThen create a file called main.js in your storybook config.
Add following content to it:
module.exports = {
addons: ['@storybook/addon-cssresources/register']
}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,
},
],
},
decorators: [withCssResources],
};
export const defaultView = () => (
<div />
);