Search code examples
reactjstypescriptnext.jsmaterial-uithemes

Where to import custom theme in MUI for Next.js?

I need to customize the colours in a React\Naxt.js project using MUI. I have come across createTheme(), also the project is in Typescript. Do I create a seperate file with the followiing and where do I import it in Next.js (layout.ts , page.ts), so that every components renders the style.

declare module '@mui/material/styles' {
  interface Theme {
    status: {
      danger: string;
    };
  }
  // allow configuration using `createTheme`
  interface ThemeOptions {
    status?: {
      danger?: string;
    };
  }
}
Solution

  • Next.js allows configuring your libraries inside the layout.tsx file. Depending on the library you're using, it's possible to create a separate config for each layout in your next.js app.

    For example:

    app/
|_layout.tsx <- a root configuration of the library
|_blog/
  |_layout.tsx <- a personalized configuration of the library for the Blog module

    For MUI you need to import your theme config, and populate it using ThemeProvider.

    Your app/layout.tsx file should look like following:

     import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';

 export default function RootLayout(props) {
   const { children } = props;
   return (
     <html lang="en">
       <body>
          <AppRouterCacheProvider>
+           <ThemeProvider theme={theme}>
              {children}
+           </ThemeProvider>
          </AppRouterCacheProvider>
       </body>
     </html>
   );
 }

    For the module declaration, create a root directory (for example: declarations/, and a file for the specific type declaration mui.d.ts. Inside that file you can declare the module as you suggested in the question.

    Refer to MUI's documentation and the article about Next.js integration for more details https://mui.com/material-ui/integrations/nextjs/.