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 !!