为MUI主题添加自定义调色板出现语法错误求助

DevOps 小满

2026-8-2

解决MUI主题添加自定义调色板的类型错误

这个错误是因为TypeScript默认不识别你新增的自定义调色板字段，需要扩展MUI的Palette相关类型接口，具体步骤如下：

在项目src目录下新建类型声明文件（比如@types/material-ui.d.ts）
在声明文件中扩展MUI的Palette和PaletteOptions接口，添加你的自定义调色板字段
在主题配置中正常使用自定义调色板
确保TypeScript配置文件（tsconfig.json）包含这个声明文件路径

类型扩展代码示例

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

declare module '@mui/material/styles' {
  // 扩展已解析的调色板类型（使用时的类型）
  interface Palette {
    custom: {
      primary: string;
      secondary: string;
      // 根据需求添加更多自定义颜色字段
    };
  }
  // 扩展调色板配置选项类型（创建主题时的配置类型）
  interface PaletteOptions {
    custom?: {
      primary?: string;
      secondary?: string;
    };
  }
}

主题配置示例

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

const theme = createTheme({
  palette: {
    custom: {
      primary: '#2ecc71',
      secondary: '#3498db',
    },
  },
});