React MUI：如何为调色板主题添加自定义文本属性？

你之前的方法只是自定义接口并做类型断言，并未真正扩展MUI的原始TypeText类型，所以TypeScript仍会报错。正确做法是通过模块扩展修改MUI内置类型：

步骤1：扩展TypeText接口 #

创建一个类型声明文件（比如src/types/mui.d.ts），或在组件文件顶部添加以下代码：

import '@mui/material/styles';

declare module '@mui/material/styles' {
  interface TypeText {
    light: string; // 新增自定义的light属性
  }
}

步骤2：创建主题时直接使用 #

无需再做类型断言，直接在theme配置里添加light属性即可：

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

export const theme = createTheme({
  palette: {
    text: {
      primary: '#111',
      secondary: '#222',
      disabled: '#333',
      light: '#444',
    },
  },
});

后续使用theme.palette.text.light时，TypeScript会正确识别该属性，不会再抛出类型错误。

注意：确保tsconfig.json的include配置包含这个类型声明文件（一般"include": ["src/**/*"]即可覆盖）。

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