How to add Material UI V5 ThemeProvider in Storybook V6 in NX

I am currently using nx.dev as a monorepo. I have multiple react clients. Thanks to NX I have a central Material Ui Configuration (inside the lib folder).

I'm trying to use Storybook inside that mui folder. Unfortunately, the ThemeProvider does not intervene. That means my custom palette etc. Will not be taken over. Unfortunately, I don't know why Storybook is not accepting the Themeprovider from MUI. Is it because of NX? Or does this have nothing to do with it?

I think there are some issues between react 18, Storybook 6 and MUI 5. But there must be a solution, cause I already build it successful, without NX and lower versions. Need help please!

Inside my lib folder there is a mui folder with a .storybook folder.

main.js

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: 'webpack5' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    ...rootMain.addons,
    '@nrwl/react/plugins/storybook',
   
  ],
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  },
};

preview.js

import React from 'react';
import { ThemeProvider, theme } from '../src';


export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <Story />
    </ThemeProvider>
  ),
]; 

I als tried that in preview.js

import React from 'react'
import { addDecorator } from '@storybook/react'
import { ThemeProvider } from '../src'
import { theme } from '../src'


export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

addDecorator((story) => (
  <ThemeProvider theme={theme}>
    {story()}
  </ThemeProvider>
))

in the src folder of the lib folder folder there is an index.ts file containing

export * from './theme';

export * from '@mui/material';

theme.ts

export const theme = createTheme({
  palette,
  spacing: [0, 4, 8, 16, 24, 32, 48, 56, 64, 80, 96],
  components: {
    ...Buttons,
  },
});

export default theme;

I finally found that issue

react material-ui v5 theming doesnt work with storybook.

That helped me a lot.

import { ThemeProvider, theme } from '../src';
import { ThemeProvider as Emotion10ThemeProvider } from 'emotion-theming';

export const decorators = [
  (Story) => (
    <Emotion10ThemeProvider theme={theme}>
      <ThemeProvider theme={theme}>
          <Story />
      </ThemeProvider>
    </Emotion10ThemeProvider>
  ),
];