Storybook: Setting up SB5 with styled components theme

[jacobgranberry]

Hi there. Trying to set up Storybook for the first time. I'm using styled components ThemeProvider to wrap the app, but the theme props aren't being passed to my stories.js files.

Heres my config:

`import { addParameters, configure } from '@storybook/react';
import { baseTheme } from '../src/Theme/theme';

addParameters({
options: {
theme: baseTheme
}
})

const req = require.context('../src', true, /.stories.js$/);

function loadStories() {
req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);
`

Not sure if or how I'm supposed to wrap those parameters in the config file to pass the theme down. Thank you

[seanmcintyre]

I think we may be trying to accomplish the same thing @jacobgranberry https://github.com/storybooks/storybook/issues/5889

[jacobgranberry]

I think we may be trying to accomplish the same thing @jacobgranberry #5889

Thanks for this. I can't seem to get your solution to work but my needs are more primitive. Hopefully theres a simpler solution soon

[jacobgranberry]

I'm dumb. This worked:

https://gist.github.com/vernondegoede/0575d268d52e00f221cc86057fb938d1

[shilman]

@jacobgranberry you should change @kadira/storybook to @storybook/react. @kadira/storybook is the old version that has been deprecated since 2016...

[seanmcintyre]

I'm releasing an addon for this soon.

[semoal]

I'm releasing an addon for this soon.

https://github.com/semoal/themeprovider-storybook

Already exists Sean, you can toggle between themes, and see all the keys of them. Writen 100% with typescript and hooks

[seanmcintyre]

I needed something that toggles the Storybook app theme and the story theme in tandem. If anyone else would like an addon that does this, feel free to give @nox/addon-themes a try!

https://github.com/seanmcintyre/addon-themes
https://www.npmjs.com/package/@nox/addon-themes

8518