MUI5 and storybook mixes the theme if rendering Docs - which cause an exception

[uwinkler]

Describe the bug
Material 5 (https://mui.com/core/) uses emotion to style its components. This clashes with storybook and the storybook theme pollutes and wipes out the MUI theme.

To Reproduce

Checkout https://github.com/uwinkler/storybook-problem
Execute yarn && yarn run storybook
Go to a 'Doc' page

See screenshot

System
System:
OS: macOS 11.5.2
CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
Binaries:
Node: 16.3.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.15.1 - /usr/local/bin/npm
Browsers:
Firefox: 91.0
Safari: 14.1.2
npmPackages:
@storybook/addon-actions: ^6.3.8 => 6.3.8
@storybook/addon-essentials: ^6.3.8 => 6.3.8
@storybook/addon-links: ^6.3.8 => 6.3.8
@storybook/node-logger: ^6.3.8 => 6.3.8
@storybook/preset-create-react-app: ^3.2.0 => 3.2.0
@storybook/react: ^6.3.8 => 6.3.8
Additional context

Add any other context about the problem here

.

[shilman]

There are a few different possible workarounds:

1. Disable docs https://storybook.js.org/docs/react/essentials/introduction#disabling-addons

2. Render docs in iframe mode (docs: { inlineStories: false }): https://storybook.js.org/docs/react/writing-docs/doc-blocks#inline-rendering

3. Try out a possible fix in 6.4:

npx sb@next upgrade --prerelease

Then in .storybook/main.js set:

module.exports = {
  features: { modernInlineRendering: true }
};

[uwinkler]

Thank you @shilman for the quick response and for your help.

Unfortunately disabling docs is not an option for us, as most of our documentation is written in mdx files.

I tried option 2) and 3) but none of them did the trick :/

Any other options?

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? See how to create a repro.

[uwinkler]

I will go through this process.

However, you may have a look at https://github.com/uwinkler/storybook-problem
This is a minimal storybook project that showcases the problem.

[uwinkler]

The repro is here: https://github.com/uwinkler/storybook-16099-issue

You can reproduce the problem yourself:

• Try to add material-ui: yarn add @mui/material @emotion/react @emotion/styled
• Add a <Button/> to the introduction.stories.mdx file: https://mui.com/getting-started/usage/

This should trigger some problems

Thxs again for your help. This is much appreciated.

[shilman]

Thanks @uwinkler--I'll take a look today 🙏

[maxquinn]

Also experiencing this issue. None of the suggested workarounds fix the issue for me.

[isenaz]

Also experiencing this issue. Looking forward for some kind of fix.
Thank you!

[cioddi]

@uwinkler thank you so much

Disabling inline rendering did the trick for me. Our stories are standard js files not mdx stories, for anyone wondering.

You saved the day!

[samuel-joyson]

@shilman this causing a lot of problems now, any updates on this issue. when it will be fixed?

[shilman]

@samuel-joyson does the workaround work for you?

[dmastrorillo]

Still having an issue with this - TypeError: Cannot read properties of undefined (reading 'content') Only in the docs tab. Canvas works okay with this workaround

This is where the issue is:

[samuel-joyson]

hey @shilman , i did the (docs: { inlineStories: false }). so its working now. but we cannot test or change props in the Docs Tab. But for me, the required functionality is to check the components in the docs tab. if disable the inline-stories, that will not work.
Please try to give the permanent solution for this in the next release. a lot of people are using storybooks with MUI.

[shilman]

@samuel-joyson we'll do our best to get a solution in 6.5 but don't get your hopes up. It's a breaking change to storybook so the earliest we can guarantee a solution is 7.0

[shilman]

Here's a solution that's better but experimental. cc @ndelangen @tmeasday

1. upgrade to the latest 6.4-beta:

npx sb@next upgrade --prerelease

2. enable the modernInlineRender feature flag in .storybook/main.js

module.exports = {
  features: { modernInlineRender: true }
}

I tried it out on @uwinkler 's reproduction here:

https://github.com/shilman/sb-mui5-modern-inline-render

[samuel-joyson]

@shilman the solution you provided works fine but if we use the material's ThemeProvider then it will give the exception.

https://github.com/shilman/sb-mui5-modern-inline-render
in the above repository if we surround the component with @mui/material ThemeProvider it will give the exception.

ref: #16099 (comment)

[shilman]

@samuel-joyson do you have an example?

[samuel-joyson]

hey @shilman please find the link to the repo

https://github.com/samuel-joyson/storybook-mui-issue

reply to: #16099 (comment)

[samuel-joyson]

@shilman did you able to find any work around for the above issue. (Material theme provider)?

Ref: #16099 (comment)

[shilman]

@samuel-joyson there is no ThemeProvider in your example. i added one to my repo and it works as expected

shilman/sb-mui5-modern-inline-render@2fe4c57

[samuel-joyson]

@shilman still the theme you customized is not giving any effect to the components, I tried to change the color of the theme, but it does not change the colors of the components (button). even I tried with some other changes but it won't give any effect.

codebase: shilman/sb-mui5-modern-inline-render@2fe4c57

const muiTheme = createTheme({
  palette: {
    primary: {
      main: '#0A703E', // success main
      dark: '#0A703E', // success dark
      light: '#0A703E' // success light
    }
  }
})

And in my project, I added the theme provider in the below file
https://github.com/samuel-joyson/storybook-mui-issue/blob/master/src/stories/checkbox.tsx

[shilman]

@samuel-joyson i can confirm your new reproduction looks ok but throws an exception. thanks for creating it!

[samuel-joyson]

@samuel-joyson i can confirm your new reproduction looks ok but throws an exception. thanks for creating it!

@shilman If we provide a theme provider as a decorator in the preview.js file it's not giving an error but it doesn't change the CSS styling.

But in case if we use a theme provider inside the component it's throwing an error.

[samuel-joyson]

@shilman finally the below solution is worked for me now.

Removing aliases in .storybook/main.js like below

module.exports = {
  stories: [
    '../src/**/**.stories.mdx',
    '../src/**/**.stories.@(js|jsx|ts|tsx)',
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
  webpackFinal(config) {
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    return config;
  },
};

[shilman]

Nice one @samuel-joyson!! cc @tooppaaa @ndelangen

[Angry-Sparrow]

Invalid build with vite.

Does anyone solve this problem with "storybook-builder-vite": "^0.1.3" ?

[shilman]

Egads!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-beta.31 containing PR #16613 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

[ar7casper]

Invalid build with vite.

Does anyone solve this problem with "storybook-builder-vite": "^0.1.3" ?

Did you manage to find a solution?

[Dari04]

Thank you very much. I'll love you! You saved me hours!