MUI:从材质v4升级到v5后，提供的' styles '参数无效

Question

我最近从Material V4升级到V5，我现在得到以下错误:

MUI: The `styles` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.

在我的App.js文件中，我有以下设置:

import { createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme } from '@mui/material/styles';
import makeStyles from '@mui/styles/makeStyles';
import { CssBaseline, Hidden } from '@mui/material';

let theme = createTheme(adaptV4Theme({
palette: {
primary: {
light: '#63ccff',
main: '#009be5',
dark: '#006db3'
}
},
typography: {
h5: {
fontWeight: 500,
fontSize: 26,
letterSpacing: 0.5
}
},
shape: {
borderRadius: 8
},
props: {
MuiTab: {
disableRipple: true
}
},
mixins: {
toolbar: {
minHeight: 48
}
}
}));
theme = {
...theme,
overrides: {
MuiDrawer: {
paper: {
backgroundColor: '#18202c'
}
}
}
};

，然后在我的App.js中有以下返回:

const classes = useStyles();
return (
<NotifyProvider>
<Routes>
<Route path="/login" element={<Login />}></Route>
<Route path="/logout" element={<Logout />}></Route>
</Routes>
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<nav className={classes.drawer}>
</nav>
<div className={classes.app}>
<Header
onDrawerToggle={handleDrawerToggle}
/>
<main className={classes.main}>
<Routes>
<Route path="/" />
</Routes>
</main>
</div>
</div>
</ThemeProvider>
</StyledEngineProvider>
</NotifyProvider>
);

我不确定问题是什么，我错过了什么，但我也注意到adaptV4Theme被废弃了。

任何帮助将是伟大的，因为应用程序根本没有启动。

Answer 1

我也有同样的问题。这里有一个线程:https://github.com/mui/material-ui/issues/30092提供一些故障排除建议。它们都没有为我工作，但线程中的其他一些人似乎已经通过删除yarn.lock和重新运行yarn install解决了这个问题，请参阅线程了解更多详细信息。如果你解决了它，请张贴在这里，让我知道是什么修复了它，已经在这个工作了几天没有运气。

ETA -我能够解决这个问题，在我的应用程序包装的组件，我在一个<ThemeProvider/>测试，建议在这里:https://github.com/mui/material-ui/issues/15528#issuecomment-487952731(我只是得到错误信息时测试)

Answer 2

FWIW，

我最近在从5.11.7升级到5.12.2时遇到了这个问题，这很奇怪。原来我不小心只更新了我的@mui/material版本，但忘记了更新其他@mui包。

最后，我将以下库更新到相同的级别:

@mui/icons-material
@mui/material
@mui/styles
@mui/system