Next.js中MUI自定义排版主题无法覆盖默认样式问题

问题出在主题配置的结构错误——你把typography嵌套在了palette对象内部，而MUI的主题规范里，typography是和palette同级的顶层配置项，导致自定义的标题样式没有被正确加载。

修正后的layout.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移到palette同级，作为顶层配置
  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>
  );
}

修改后，Nav组件中使用variant="h2"和variant="h5"的Typography元素，就会正确应用你定义的字号和 fontWeight 样式了。

内容的提问来源于stack exchange，提问作者Nithin Reddy