mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-29 05:04:31 +08:00
36ee762ec7
- `@types/webpack-env` must be defined as `dependencies` in packages that export a type/function using typings from `@types/webpack-env` (it is often `NodeModule`). In that case `/// <reference types="webpack-env" />` is present in some files of the `dist` folder of the lib. Example: `lib/client-api`. - `@types/webpack-env` must be defined as `devDependencies` in packages that use its typings internally but does not expose anything related to it. Many addons need the type because they use `module.hot` function. Example: `addons/a11y` - `webpack-env` should be removed from "compilerOptions.types" key of `tsconfig.json` of packages that don't need it. I also bump `@types/webpack-env` to ^1.15.0 to have the same version all across the monorepo
Storybook Addon Cssresources
Storybook Addon Cssresources to switch between css resources at runtime for your story Storybook.
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/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 { 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 />
);