mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 05:41:06 +08:00
c42b1db400
`regenerator-runtime` is used as polyfill to backport async/await and generator to old browser (like core-js). Any package that use async/await or generator will require `regenerator-runtime` at runtime without any import in the source (it's added by babel during transpilation). To avoid any issue in the future `regenerator-runtime` is added to almost all packages, as it has been done for `core-js` What I did? - Add it when it was missing - Move it from peerDep to dep when needed - Use the same, and latest, version for all packages
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,
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 />;