Installing Next.js
pnpm create next-app@latest my-app --yescd my-apppnpm dev
Installing MUI
pnpm add @mui/material @emotion/react @emotion/styled @fontsource/roboto @mui/icons-material @mui/material-nextjs @emotion/cache
- Add theme file app/theme.ts:
'use client';
import { createTheme } from '@mui/material/styles';
const theme = createTheme({
palette: {
mode: 'dark',
},
typography: {
fontFamily: 'var(--font-roboto)',
},
});
export default theme;- Add theming to app.layout.tsx:
import { Roboto } from 'next/font/google';
import { ThemeProvider } from '@mui/material/styles';
import theme from '../theme';
const roboto = Roboto({
weight: ['300', '400', '500', '700'],
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto',
});
export default function RootLayout(props) {
const { children } = props;
return (
<html lang="en" className={roboto.variable}>
<body>
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
</body>
</html>
);
}