After recently upgrading from Material V4 to V5, I encountered the following error message:
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.
In my App.js file, here is the setup that I have:
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'
}
}
}
};
Then in my App.js file, this is what I have returning:
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>
);
I'm uncertain about the issue and what might be causing it. I also noticed that adaptV4Theme is deprecated.
Any assistance would be appreciated as my app is failing to start completely.