MUI通过主题嵌套覆盖fontFamily属性不生效该如何解决

问题原因 #

MUI 的 createTheme 方法在初始化主题时，会自动将根节点配置的 typography.fontFamily 同步到所有内置 typography 变体（包括 button、body1、h1 等）的独立配置中。你在创建外层主题时，所有变体的字体已经被固化为 sans-serif，内层主题仅修改根 typography.fontFamily 不会同步更新已生成的变体配置，因此组件读取自身对应变体的字体配置时仍然会拿到外层的 sans-serif。

解决方案1：内层主题显式覆盖所有变体字体 #

修改 innerTheme.js，在配置中显式重置所有typography变体的fontFamily：

import { createTheme } from "@mui/material";
import outerTheme from "./outerTheme";

// 枚举所有MUI内置的typography变体key
const typographyVariants = [
  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2',
  'body1', 'body2', 'button', 'caption', 'overline'
];

const innerTheme = createTheme(outerTheme, {
  palette: {
    primary: {
      main: "#0000ff",
    },
  },
  typography: {
    fontFamily: "serif",
    // 批量为所有变体设置新的字体，同时保留原有变体的其他配置
    ...Object.fromEntries(typographyVariants.map(variant => [
      variant, 
      { ...outerTheme.typography[variant], fontFamily: "serif" }
    ]))
  },
});

export default innerTheme;

解决方案2：内层主题独立生成typography配置 #

如果不需要复用外层的typography自定义配置，可以直接重新生成完整的typography对象，避免继承外层已固化的变体配置：

import { createTheme } from "@mui/material";
import outerTheme from "./outerTheme";

const innerTheme = createTheme({
  palette: {
    primary: {
      main: "#0000ff",
    },
  },
  typography: {
    ...outerTheme.typography,
    fontFamily: "serif",
  },
});

export default innerTheme;

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