I am currently utilizing nx.dev as my monorepo setup with various React clients. With NX, I have centralized the configuration for Material Ui inside the lib folder.
The issue arises when I try to integrate Storybook within the mui folder. Unfortunately, the ThemeProvider does not apply, causing my custom palette settings to be ignored. I am unsure why Storybook is not recognizing the Themeprovider from MUI. Could this be related to NX or is it a separate issue?
It seems like there are compatibility challenges between React 18, Storybook 6, and MUI 5. However, there should be a solution as I have successfully built it before with lower versions and without using NX.
Within the lib folder, there is a mui folder containing 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 also attempted the following 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>
))
Inside the src folder of the lib folder, there is an index.ts file which includes:
export * from './theme';
export * from '@mui/material';
Theme.ts
const theme = createTheme({
palette,
spacing: [0, 4, 8, 16, 24, 32, 48, 56, 64, 80, 96],
components: {
...Buttons,
},
});
export default theme;