mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 18:31:08 +08:00
51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
# Storybook Addon Cssresources
|
|
|
|
Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
|
|
|
|
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
yarn add -D @storybook/addon-cssresources
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Then create a file called `main.js` in your storybook config.
|
|
|
|
Add following content to it:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
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 />;
|
|
```
|