扩展MUI Theme类型定义未生效的相关配置咨询

你的代码存在几个不符合MUI类型扩展规则、不符合TS模块增强要求的问题，按以下步骤调整即可正常生效：

• 模块扩展必须使用interface做声明合并，禁止用type别名。TypeScript 模块增强的合并逻辑仅对interface生效，你当前用type重定义Theme/ThemeOptions的写法，既不会和MUI原生导出的类型合并，还会打断原有类型推导，直接导致扩展失效。
• 类型声明文件必须被TS配置识别。如果你把模块扩展代码写在普通.ts文件中，需要保证这个文件被项目入口引用，避免TS构建时将未引用的类型声明摇掉；更稳妥的方案是把MUI模块扩展代码单独放在.d.ts类型声明文件中，同时确认tsconfig.json的include配置覆盖到该文件路径。
• 不要遗漏类型的可选标记。ThemeOptions是创建主题时传入的配置类型，对应你扩展的字段需要加?可选标记，和MUI原生类型定义保持一致，避免创建主题时出现不必要的类型报错。

正确代码示例 #

类型扩展部分（推荐放在单独的src/types/mui.d.ts文件中） #

// 先导入MUI样式模块，保证模块上下文正确
import '@mui/material/styles';
import { type ThemeOptions as MuiThemeOptions, type Theme as MuiTheme } from '@mui/material/styles';

declare module '@mui/material/styles' {
  // 用interface做声明合并，不要用type
  interface Theme extends MuiTheme {
    spacing: number[]
    // 其他需要新增的自定义字段直接写在这里即可
  }

  interface ThemeOptions extends MuiThemeOptions {
    // ThemeOptions是入参类型，自定义字段加可选标记
    spacing?: number[]
  }
}

业务代码部分 #

base.ts不需要做额外修改，只要上述类型声明被TS正确加载，就可以自动识别扩展后的Theme类型：

// base.ts
import { type Theme } from '@mui/material/styles';
export const base: Theme = {
  spacing: [0, 3, 6],
};

额外校验项 #

如果调整后仍不生效，检查以下配置：

• tsconfig.json中compilerOptions.typeRoots配置如果做了自定义，需要把node_modules/@mui的路径包含进去，避免TS找不到MUI原生类型
• 不要给declare module块内部的interface加export关键字，否则会被识别为模块内的局部类型，不会做全局合并
• 如果项目用了VS Code，调整配置后重启TS服务（快捷键Cmd/Ctrl + Shift + P 选择 TypeScript: Restart TS Server），避免编辑器类型缓存导致的不生效

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