Menu
im currently following a tutorial and I tried this code before in nextjs 12 and it works perfectly fine. now im trying this code in nextjs 13 and im getting an error and i don't really get why im getting this error. the tutorial uses nextjs 12 and @mui/styles but since @mui/styles is now a legacy version im now using @mui/system. i've tried completing the whole tutorial in nextjs 12 but i just keep getting vulnerabilities and errors so im now trying it on nextjs 13
this is the code
import { createTheme } from '@mui/system';
import {
AppBar,
Box,
Container,
CssBaseline,
Link,
ThemeProvider,
Toolbar,
Typography,
} from '@mui/material';
import Head from 'next/head';
import NextLink from 'next/link';
import classes from '../utils/classes';
export default function Layout({ title, description, children }) {
const theme = createTheme({
components: {
MuiLink: {
defaultProps: {
underline: 'hover',
},
},
},
typography: {
h1: {
fontSize: '1.6rem',
fontWeight: 400,
margin: '1rem 0',
},
h2: {
fontSize: '1.4rem',
fontWeight: 400,
margin: '1rem 0',
},
},
palette: {
mode: 'light',
primary: {
main: '#f0c000',
},
secondary: {
main: '#208080',
},
},
});
return (
<>
<Head>
<title>{title ? `${title} - My App` : 'My App'}</title>
{description && <meta name="description" content={description}></meta>}
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<AppBar position="static" sx={classes.appbar}>
<Toolbar sx={classes.toolbar}>
<NextLink href="/" passHref>
<Link>
<Typography sx={classes.brand}>My App</Typography>
</Link>
</NextLink>
</Toolbar>
</AppBar>
<Container component="main" sx={classes.main}>
{children}
</Container>
<Box component="footer" sx={classes.footer}>
<Typography>All rights reserved. My App.</Typography>
</Box>
</ThemeProvider>
</>
);
}
this is the error
586
asked Sep 13 '25 08:09
It seems like using
import { createTheme } from '@mui/material/styles';
instead of
import { createTheme } from '@mui/system';
fixes the error.
139
answered Sep 14 '25 21:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With