storybook-addon-material-ui icon indicating copy to clipboard operation
storybook-addon-material-ui copied to clipboard

MuiThemeProvider not Working with Separate Storybook Project

Open chriszwickerocteris opened this issue 4 years ago • 3 comments

I have a setup with one storybook project containing stories from different projects in a monorepo. When using storybook-addon-material-ui, my theme does not get injected into a themed component, but rather the default theme gets used.

I've created a temporary workaround by patching muiTheme.js and UI/MuiDecorator.js to allow passing an additional option themeProvider and using that instead of the imported MuiThemeProvider. In my stories, I then specifically import MuiThemeProvider from node_modules in the project my target component is defined in and pass it to muiTheme in addDecorator.

Maybe there is a better solution for the problem? If not, it would be great if you could integrate my changes (I'm currently patching the transpiled JS files using patch-package, but happy to provide a PR if that helps!).

chriszwickerocteris avatar Aug 21 '19 06:08 chriszwickerocteris

An even better alternative might be an option to specify the (relative) path to the project from which to use @material-ui/core. This would avoid having to install the package into the separate storybook project. Would be a bit more complicated, though ;-)

chriszwickerocteris avatar Aug 21 '19 07:08 chriszwickerocteris

Hey @chriszwickerocteris

If I right understand you faced a case when you need to provide your own ThemeProvider to this addon? It looks interesting and opens possibility to use the addon with other theming systems. Maybe I miss something in your specific case but I'd be happy if you show your idea in terms of addon API or start a PR. :+1:

usulpro avatar Aug 25 '19 15:08 usulpro

Sorry, missed your reply. I'll try to find the time to create a PR (soon, hopefully)!

chriszwickerocteris avatar Sep 05 '19 15:09 chriszwickerocteris