StorybookConfig在阅读MUI 5迁移文档后无法工作

Question

我已经研究了几天了，找不到适合我的用例的解决方案(或者至少还没有起作用(。我正在努力让故事书与MUI5的风格。我试着遵循这里的迁移文档，但仍然没有看到MUI5样式出现在故事书中，特别是我使用的全局字体。我发现这与情感与故事书不兼容有关，并尝试使用情感^11.0.0。

目前正在使用故事书6.5和MUI 5。任何指导都将不胜感激。

这是我的预览js:

import React from 'react';
/* import { BrowserRouter } from 'react-router-dom'; */
import { Theme, default as MaterialTheme } from '../src/ui/GlobalTheme';
import { ThemeProvider as Emotion10ThemeProvider } from '@emotion/react';
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
};
const withThemeProvider = (Story, context) => {
return (
<Emotion10ThemeProvider theme={Theme}>
<MaterialTheme theme={Theme}>
<Story {...context} />
</MaterialTheme>
</Emotion10ThemeProvider>
);
};
export const decorators = [withThemeProvider];

main.js

const path = require('path');
const toPath = (filePath) => path.join(process.cwd(), filePath);
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-storysource'],
core: {
builder: 'webpack5',
},
webpackFinal: async (config) => {
return {
...config,
resolve: {
...config.resolve,
alias: {
...config.resolve.alias,
'@emotion/core': toPath('node_modules/@emotion/react'),
'emotion-theming': toPath('node_modules/@emotion/react'),
},
},
};
},
};

globaltheme.tsx

import {
ThemeProvider,
Theme,
StyledEngineProvider,
createTheme,
adaptV4Theme,
} from '@mui/material';
import React from 'react';
export const Theme = createTheme(adaptV4Theme(baseTheme));
const MaterialTheme: React.FC = ({ children }) => (
<StyledEngineProvider injectFirst>
<ThemeProvider theme={Theme}>{children}</ThemeProvider>
</StyledEngineProvider>
);
export default MaterialTheme;

Answer 1

我也遇到了同样的问题。我在这里测试了你的代码，我只需要更改它，没有预览.js

import { Theme, default as MaterialTheme } from '../src/ui/GlobalTheme';

至

import { Theme } from '../src/ui/GlobalTheme';
import { ThemeProvider } from '@mui/material/styles'

const withThemeProvider = (Story, context) => {
return (
<Emotion10ThemeProvider theme={Theme}>
<ThemeProvider theme={Theme}>
<Story {...context} />
</ThemeProvider>
</Emotion10ThemeProvider>
)
}

抱歉拼写错误，我用谷歌翻译