React+TypeScript环境下无法修改MUI默认主题

问题核心是MUI在TypeScript环境下对主题对象有严格的类型约束，默认的Palette/Theme接口不包含自定义属性，直接添加会触发类型错误——JavaScript环境没有类型检查，所以能正常运行。

解决步骤： #

1. 扩展MUI的类型定义
   在项目中创建一个类型声明文件（比如src/types/mui.d.ts），通过声明合并扩展MUI的相关接口，把你需要的自定义属性加入类型系统：

// src/types/mui.d.ts
import { Palette, PaletteOptions } from '@mui/material/styles';

// 扩展Palette接口，让TS识别自定义的主题颜色属性
declare module '@mui/material/styles' {
  interface Palette {
    arcBlue: string;
    arcOrange: string;
  }
  // 扩展PaletteOptions，允许在创建主题时传入这些自定义属性
  interface PaletteOptions {
    arcBlue?: string;
    arcOrange?: string;
  }
}

如果是要给palette.common添加新颜色，就扩展CommonColors接口：

// src/types/mui.d.ts
import { CommonColors } from '@mui/material/styles';

declare module '@mui/material/styles' {
  interface CommonColors {
    blue: string; // 这里定义你要加的common属性键名和类型
  }
}

2. 在主题中添加自定义属性
   现在可以正常在createTheme里添加自定义键了，TS不会再报错：

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

enum ThemePalette {
  ARCBLUE = "#0B72B9",
  ARCORANGE = "#FFBA60",
}

const theme = createTheme({
  palette: {
    arcBlue: ThemePalette.ARCBLUE,
    arcOrange: ThemePalette.ARCORANGE,
    primary: {
      main: ThemePalette.ARCBLUE,
    },
    secondary: {
      main: ThemePalette.ARCORANGE,
    },
    // 如果是扩展common的情况：
    // common: {
    //   blue: ThemePalette.ARCBLUE
    // }
  },
});

export default theme;

3. 确保TS配置识别类型文件
   检查你的tsconfig.json，确保include数组包含了这个类型文件所在的目录：

{
  "compilerOptions": {
    // ...其他配置
  },
  "include": ["src/**/*", "src/types/**/*"]
}

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