如何为Material UI Theme添加自定义变量？TypeScript报错修复

你遇到的TS2322错误是因为Material UI的PaletteOptions类型未定义customYellow和customTable这类自定义属性，TypeScript无法识别它们。通过模块扩展可以扩展Material UI的内置类型，让自定义属性被正确识别，具体步骤如下：

步骤1：创建类型扩展文件 #

在主题目录下新建一个类型文件（比如src/theme/types.ts），用来扩展Material UI的调色板类型：

import { Palette, PaletteOptions } from '@mui/material/styles';

// 扩展PaletteOptions，允许在主题配置时传入自定义属性
declare module '@mui/material/styles' {
  interface PaletteOptions {
    customYellow?: {
      dark: string;
      main: string;
      light: string;
    };
    customTable?: {
      dark: string;
      light: string;
    };
  }

  // 扩展Palette，确保使用主题时能正确获取自定义属性的类型
  interface Palette {
    customYellow: {
      dark: string;
      main: string;
      light: string;
    };
    customTable: {
      dark: string;
      light: string;
    };
  }
}

代码说明： #

• PaletteOptions是主题配置时的类型，给自定义属性加?标记为可选（适配仅在部分主题中定义的场景）；
• Palette是主题实例的类型，这里不需要加?，因为实际创建主题时会提供属性的具体值，确保类型安全。

步骤2：让TypeScript识别扩展类型 #

确保tsconfig.json包含该类型文件，默认配置如下即可：

{
  "include": ["src/**/*"]
}

如果类型文件在src目录下，会被自动识别，无需额外配置。

步骤3：使用自定义属性 #

回到主题配置文件，现在定义customYellow和customTable不会触发TypeScript错误，原有代码可正常保留（注意修复info.dark的引号闭合错误）：

import { createTheme } from "@mui/material/styles";
import { green, red, yellow, orange } from "@mui/material/colors";
import components from "./components";
import typography from "./typography";
// 若类型文件未自动识别，手动导入
// import './types';

export default {
    dark: createTheme({
        palette: {
            mode: "dark",
            background: {
                default: "rgb(21, 22, 43)",
                paper: "rgb(35, 48, 68)"
            },
            text: {
                primary: "rgba(255, 255, 255, 0.85)",
                secondary: "rgba(255, 255, 255, 0.5)",
            },
            info: {
                main: 'rgb(142, 221, 229)',
                light: 'rgb(183, 238, 242)',
                dark: 'rgb(92, 205, 219)',
                contrastText: 'rgb(235, 234, 239)',
            },
            customYellow: {
                dark: yellow[800],
                main: 'rgb(250, 222, 101)',
                light: 'rgb(252, 237, 133)',
            },
            customTable: {
                dark: "rgb(21, 28, 38)",
                light: "rgb(30, 32, 36)"
            },
            divider: 'rgb(85, 89, 110)',
        },
        typography: typography,
        components: components
    }),
};

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