logo
Web Development UpdatesJavascriptReactCSSNextJSNode.JSCloud
Web Development UpdatesJavascriptReactCSSNextJSNode.JSCloud
post image

Implement MUI Theming in NextJS App Router

NextJS

A custom MUI theme can be implemented in the root layout.js script of the NextJS app. If you are using server side rendering for layout, you will need to include MUI theming as a client side component.

Our routing structure will look something like the below. LayoutClient.js will hold the component that implements MUI theme.

app/
|-- layout.js
components
|-- LayoutClient.js

layout.js should look something like this the below. It includes LayoutClient that wraps the <body>

import LayoutClient from '../components/LayoutClient'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head></head>
      <LayoutClient>
	      <body>
	        {children}
	      </body>
      </LayoutClient>
    </html>
  )
}

LayoutClient.js will implement MUI theming as a client side component.

'use client'

import { ThemeProvider, createTheme } from '@mui/material/styles'

export default function LayoutClient({ children }) {
  const theme = createTheme({
    typography: {
      fontFamily: 'Montserrat'
    },
    shape: {
      borderRadius: 0
    },
    palette: {
      primary: {
        main: '#00cec9'
      }
    }
  })

  return (
    <ThemeProvider theme={theme}>
      {children}
    </ThemeProvider>
  )
}