Search code examples
javascriptreactjsnext.jsmaterial-uijsx

Custom typography theme not able to override the default typography in MUI in Next js

I'm using Material-UI (MUI) with a custom theme in my Next.js React project. While colors from the theme are applied correctly, I'm unable to change the default font sizes of H2 and H5 elements. I've defined styles for these heading levels in the theme's typography object, but they aren't reflected in the rendered HTML.

this is layout.js file in next.js

"use client";

import { ThemeProvider, createTheme } from "@mui/material";
import "./globals.css";

const theme = createTheme({
  palette: {
    primary: {
      dark: "#5d059c",
      main: "#8608E0",
      light: "#9e39e6",
      contrastText: "#E9E1EF",
    },
    secondary: {
      dark: "#3c1656",
      main: "#56207C",
      light: "#774c96",
      contrastText: "#E9E1EF",
    },
    typography: {
      h2: {
        fontSize: "5rem",
        fontWeight: 700,
      },
      h5: {
        fontSize: "1rem",
        fontWeight: 500,
      },
    },
  },
});

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

this is the component i am working on

import { Box, Button, Container, Typography } from "@mui/material";
import React from "react";

const Nav = () => {
  return (
    <>
      <Container
        sx={{
          bgcolor: "primary.light",
          height: "13vh",
          display: "flex",
          justifyContent: "space-between",
          width: "100%",
        }}
      >
        <Box>
          <Typography variant="h2">logo</Typography>
        </Box>
        <Box sx={{ display: "flex", gap: "2vh", alignItems: "center" }}>
          <Typography variant="h5">about us</Typography>
          <Typography variant="h5">contact</Typography>
          <Typography variant="h5">more</Typography>
          <Button color="secondary" variant="contained">
            click here
          </Button>
        </Box>
      </Container>
    </>
  );
};

export default Nav;

i have exported this component into app

but still i am not able to override the default sizes for h2 and h5 !!

Solution

  • Similar to palette, you need to set typography variable as the first-level child of createTheme theme object like this:

    let theme = createTheme({
  palette: {
    primary: {
      dark: '#5d059c',
      main: '#8608E0',
      light: '#9e39e6',
      contrastText: '#E9E1EF',
    },
    secondary: {
      dark: '#3c1656',
      main: '#56207C',
      light: '#774c96',
      contrastText: '#E9E1EF',
    },
  },
  typography: {
    h2: {
      fontSize: '5rem',
      fontWeight: 700,
    },
    h5: {
      fontSize: '1rem',
      fontWeight: 500,
    },
  },
});

    You can take a look at this StackBlitz for a live working example of your sample code.