|
1 | 1 | # storybook-styled-components
|
2 | 2 |
|
3 |
| - |
| 3 | +**DEPRECATED!** |
| 4 | + |
| 5 | +This plugin has issues when used with Storybook v5 and beyond, and there's a better option available at: |
| 6 | +https://github.com/echoulen/storybook-addon-styled-component-theme |
4 | 7 |
|
5 |
| -### Switch between themes and see how your components react |
| 8 | + |
6 | 9 |
|
| 10 | +_Switch between themes and see how your components react_ |
7 | 11 |
|
8 | 12 | ## Set It Up
|
9 | 13 |
|
10 | 14 | inside your storybook addons, register the `storybook-styled-components`:
|
11 | 15 |
|
12 | 16 | ```javascript
|
13 | 17 | // addons.js
|
14 |
| -import 'storybook-styled-components/register' |
| 18 | +import "storybook-styled-components/register"; |
15 | 19 | ```
|
16 | 20 |
|
17 | 21 | In your config.js, define your theme configuration and pass it in to the `addDecorator` function
|
18 | 22 |
|
19 |
| - |
20 | 23 | ```javascript
|
21 | 24 | // config.js
|
22 |
| -import { configure, addDecorator } from '@storybook/react' |
23 |
| -import { withThemes } from 'storybook-styled-components' |
| 25 | +import { configure, addDecorator } from "@storybook/react"; |
| 26 | +import { withThemes } from "storybook-styled-components"; |
24 | 27 |
|
25 | 28 | // then import your themes
|
26 |
| -import firstTheme from './src/themes/first' |
27 |
| -import secondTheme from './src/themes/second' |
| 29 | +import firstTheme from "./src/themes/first"; |
| 30 | +import secondTheme from "./src/themes/second"; |
28 | 31 |
|
29 | 32 | const themes = {
|
30 |
| - 'First Theme': firstTheme, |
31 |
| - 'Second Theme': secondTheme, |
32 |
| -} |
| 33 | + "First Theme": firstTheme, |
| 34 | + "Second Theme": secondTheme |
| 35 | +}; |
33 | 36 |
|
34 | 37 | // now add the decorator
|
35 |
| -addDecorator(withThemes(themes)) |
| 38 | +addDecorator(withThemes(themes)); |
36 | 39 | // done!
|
37 | 40 | ```
|
38 | 41 |
|
39 |
| -#### This is still a Work In Progress ... Feedback welcomed |
| 42 | +**This is still a Work In Progress ... Feedback welcomed** |
40 | 43 |
|
41 |
| -# [Read The License](./license.md) |
| 44 | +[Read The License](./license.md) |
0 commit comments