如何在MUI自定义主题中使用自定义断点配置排版字号？

你的问题出在直接使用断点数值作为媒体查询键，MUI的排版样式需要完整的CSS媒体查询字符串（比如@media (min-width:992px)），而非单纯的像素数值。以下是正确的实现方式：

正确代码示例 #

import { createTheme, createBreakpoints } from "@mui/material/styles";

// 创建带方法的自定义断点实例，而非单纯的数值对象
const breakpoints = createBreakpoints({
  values: {
    xs: 0,
    sm: 576,
    md: 768,
    lg: 992,
  },
});

const theme = createTheme({
  breakpoints: breakpoints,
  typography: {
    fontSize: "2rem",
    h2: {
      // 使用自定义断点的up方法生成正确的媒体查询
      [breakpoints.up("lg")]: {
        fontSize: "4.25rem",
      },
    },
    h4: {
      fontSize: "1rem",
      [breakpoints.up("lg")]: {
        fontSize: "2.125rem",
      },
    },
  },
});

export default theme;

关键说明 #

• 使用createBreakpoints工具：这个函数会把自定义断点数值转换成带有up/down等方法的断点对象，这些方法能生成符合CSS规范的媒体查询字符串，而非单纯的像素数字。
• 避免调用空参数createTheme()：createTheme()不带参数时会生成MUI默认主题，其内部的断点也是默认值，会覆盖自定义配置。
• 复用自定义断点实例：定义排版样式时直接使用创建好的breakpoints实例方法，确保媒体查询基于自定义断点值生成。

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