Unable to get themes to work on story components about storybook-addon-material-ui

[mayteio]

I built a super lightweight version of this addon - that solves my problem above. Just pass your themes in and toggle with a dropdown 👍

[mayteio]

Same issue here. Would be awesome to be able to toggle them.

[mayteio]

All good - if I have a moment I’ll see if I can get something similar working in this package. I just wanted to wrap my themes rather than build them in storybook for an internal component library - branding and colours are already set.

[JanineAmelie]

@mayteio Thanks!!! It doesn't have all the features that I want, like color selection but this is already a great compromise <3 <3 <3

[justin-peterson-jdas]

@mayteio awesome man, nice addon :) This is exactly what I was going to do. I'm going to see if I can just utilize yours instead

[yatrix7]

I built a super lightweight version of this addon - that solves my problem above. Just pass your themes in and toggle with a dropdown 👍

Worked the first time I tried it. Well done.

[usulpro]

Hey here!

First of all sorry for the inconvenience and thank you for your patience 😸

While developing of stable version of this addon is in progress and you're looking for just a simple functionality, you can switch to another one:
https://github.com/react-theming/storybook-addon

It's an universal one and don't have Material-UI specific features, but you can use it when switching themes and changing colors is enough for your case

demo

yarn add --dev @react-theming/storybook-addon

to use it with Material UI you'll need to pass theme provider into decorator this way:

import { withThemes } from '@react-theming/storybook-addon';
import { ThemeProvider } from '@material-ui/core';
import { createMuiTheme } from '@material-ui/core/styles';

import theme from '../theme';

const providerFn = ({ theme, children }) => {
  const serialTheme = JSON.parse(JSON.stringify(theme));
  const muTheme = createMuiTheme(serialTheme);
  return <ThemeProvider theme={muTheme}>{children}</ThemeProvider>;
};

export default {
  title: 'MUI Examples',
  component: Component,
  decorators: [withThemes(null, [theme], { providerFn })],
};

or see details in the template project https://github.com/react-theming/theming-material-ui

[JanineAmelie]

Bump I have the same problem. Would really like some solution

[usulpro]

Thanks @mayteio

Also any PRs with improvements to this project are always welcome!

[vvetsko]

Had the same problem, but is ok when passing ThemeOptions instead of Theme into muiTheme decorator.

The issue still exists, as I am using typescript and should add an exception for this (

[usulpro]

@vvetsko can we update https://github.com/react-theming/storybook-addon-material-ui/blob/version-1/storybook-addon-material-ui.d.ts to add the exception?

[Moonachi]

I have same issue. Has the issue been resolved?