如何在NextJS中使用createTheme为MaterialCSS定义H1/H2/H3自定义样式

要在MUI的Next.js项目里给H1、H2、H3设置自定义样式，同时让深色主题的H3样式和浅色主题不同，可以通过主题的typography配置和组件样式覆盖实现，具体步骤如下：

1. 配置浅色主题的标题基础样式 #

在lightTheme中，通过typography字段定义H1、H2、H3的通用样式，比如字体大小、字重、颜色和间距：

import { createTheme } from '@mui/material/styles';

export const lightTheme = createTheme({
  palette: {
    mode: 'light',
  },
  typography: {
    h1: {
      fontSize: '2.5rem',
      fontWeight: 700,
      color: '#1a1a1a',
      marginBottom: '1rem',
    },
    h2: {
      fontSize: '2rem',
      fontWeight: 600,
      color: '#2d2d2d',
      marginBottom: '0.8rem',
    },
    h3: {
      fontSize: '1.75rem',
      fontWeight: 500,
      color: '#3a3a3a',
      marginBottom: '0.6rem',
    },
  },
});

2. 配置深色主题的标题样式（重点覆盖H3） #

在darkTheme中，可复用浅色主题的H1、H2样式，再单独修改H3的属性以适配深色背景：

export const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
  typography: {
    // 复用浅色主题的H1、H2样式，也可在这里重新定义
    h1: lightTheme.typography.h1,
    h2: lightTheme.typography.h2,
    // 自定义深色主题专属的H3样式
    h3: {
      fontSize: '1.75rem',
      fontWeight: 600, // 比浅色主题更粗
      color: '#e0e0e0', // 浅色文本适配深色背景
      marginBottom: '0.6rem',
    },
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          color: 'white',
        },
      },
    },
  },
});

3. 应用样式到页面 #

方式一：使用MUI的Typography组件 #

直接使用Typography组件并指定variant为h1/h2/h3，会自动应用主题中定义的样式：

import Typography from '@mui/material/Typography';

function MyPage() {
  return (
    <div>
      <Typography variant="h1">一级标题</Typography>
      <Typography variant="h2">二级标题</Typography>
      <Typography variant="h3">三级标题</Typography>
    </div>
  );
}

方式二：适配原生H1/H2/H3标签 #

如果要让原生<h1>/<h2>/<h3>标签也应用主题样式，可通过MuiCssBaseline配置全局样式覆盖：

// 浅色主题添加全局样式配置
export const lightTheme = createTheme({
  // ... 其他配置
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        h1: { ...lightTheme.typography.h1 },
        h2: { ...lightTheme.typography.h2 },
        h3: { ...lightTheme.typography.h3 },
      },
    },
  },
});

// 深色主题同理
export const darkTheme = createTheme({
  // ... 其他配置
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        h1: { ...darkTheme.typography.h1 },
        h2: { ...darkTheme.typography.h2 },
        h3: { ...darkTheme.typography.h3 },
      },
    },
    MuiButton: {
      styleOverrides: {
        root: {
          color: 'white',
        },
      },
    },
  },
});

之后在_app.js中引入CssBaseline即可生效：

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { lightTheme, darkTheme } from '../path/to/theme';

export default function App({ Component, pageProps }) {
  // 可根据状态动态切换主题，比如使用next-themes库
  const theme = darkTheme;
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

注意事项 #

• 若不需要复用浅色主题的标题样式，可直接在深色主题中重新定义所有标题属性
• 可通过theme.typography.fontFamily统一设置全局字体，再在各标题变体中调整细节
• 动态切换主题时，ThemeProvider会自动更新所有组件样式，无需手动处理

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