Skip to content

Instantly share code, notes, and snippets.

@CoralSilver

CoralSilver/config.js

Forked from vernondegoede/config.js
Last active July 10, 2021 13:37
Show Gist options
  • Save CoralSilver/339fe65a6c25e585af22c9fc55e2765d to your computer and use it in GitHub Desktop.
Save CoralSilver/339fe65a6c25e585af22c9fc55e2765d to your computer and use it in GitHub Desktop.
Download ZIP
Storybook config with ThemeProvider
Raw
config.js
// 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);
@semoal
Copy link

semoal commented Oct 20, 2019

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!

@manuEleven
Copy link

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