如何在NX的Storybook V6中添加材质UI V5 ThemeProvider

Question

我目前使用nx.dev作为monorepo。我有多个react客户。多亏了NX，我有一个中央Material Ui配置(在lib文件夹内)。

我正试图使用Storybook内的mui文件夹。不幸的是，ThemeProvider没有干预。这意味着我的自定义调色板等。不会被接管。不幸的是，我不知道为什么Storybook不接受MUI的Themeprovider。是因为NX吗?还是说这和它无关?

我认为react 18,Storybook 6和MUI 5之间存在一些问题。但一定有解决方案，因为我已经成功地构建了它，没有NX和更低的版本。需要帮助!

在我的lib文件夹中有一个带有。storybook文件夹的mui文件夹。

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>
),
]; 

我也试过在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>
))

在lib文件夹的SRC文件夹中有一个索引。包含

的文件

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;

Answer 1

我终于发现了这个问题

react material-ui v5 theme不能在storybook中使用

这对我帮助很大。

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>
),
];

Answer 2

@maxfromgermany。我最近遇到了这样一个问题，用这个代码库解决了这个问题。将以下代码添加到".storybook/preview.js"

export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/
}
}
}
import React from "react"
import { addDecorator } from "@storybook/react"
import { ThemeProvider } from "@mui/material/styles"
import { muiTheme } from "../src/config/mui-theme"
addDecorator((story) => <ThemeProvider theme={muiTheme}>{story()}</ThemeProvider>)

~ Storm In Talent