mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
63 lines
1.8 KiB
Markdown
63 lines
1.8 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/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
```sh
|
|
yarn add -D @storybook/addon-cssresources
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Then create a file called `addons.js` in your storybook config.
|
|
|
|
Add following content to it:
|
|
|
|
```js
|
|
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:
|
|
|
|
```js
|
|
// 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,
|
|
},
|
|
],
|
|
});
|
|
```
|