-
-
Save CoralSilver/339fe65a6c25e585af22c9fc55e2765d to your computer and use it in GitHub Desktop.
Storybook config with ThemeProvider
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// File: .storybook/config.js | |
import { configure, addDecorator } from '@kadira/storybook'; | |
import Theme from './../src/ui/theme'; | |
import React from 'react'; | |
import { ThemeProvider } from 'styled-components' | |
function loadStories() { | |
require('../stories'); | |
} | |
addDecorator((story) => ( | |
<ThemeProvider theme={Theme}> | |
{story()} | |
</ThemeProvider> | |
)) | |
configure(loadStories, module); |
Thanks for your gist! It solved my problem ❤️
Just in case, an alternative syntax that re-use yours but chains storiesOf
methods instead :-)
// src/components/Component.stories.js
import React from 'react';
import { storiesOf } from '@storybook/react';
(...)
storiesOf('Component', module)
.addDecorator(story => (
<ThemeProvider theme={theme}>
{ story() }
</ThemeProvider>
))
.add('default', () => <Component />);
.add('second story', () => <Component second />);
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://github.com/semoal/themeprovider-storybook
You can use my plugin, so you can change between themes easily, and see all the keys of them!