如何扩展嵌套对象接口？（MUI主题调色板扩展场景）

你遇到的核心问题是直接重写了CustomThemeOptions中的palette属性，导致原ThemeOptions内置的primary、secondary等调色板字段被覆盖，TypeScript不再认可这些原有字段。正确的做法是扩展MUI的内置调色板类型，而非直接覆盖。

正确实现方案 #

通过TypeScript的模块扩展机制，补充MUI内置的调色板类型，这样既保留原有字段的类型支持，又能添加自定义颜色：

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

// 扩展MUI的调色板类型
declare module "@mui/material/styles" {
  // 给已实例化的Theme对象添加muted颜色的类型提示
  interface Palette {
    muted: {
      main: string;
    };
  }

  // 给主题配置对象添加muted颜色的类型提示
  interface PaletteOptions {
    muted?: {
      main: string;
    };
  }
}

export const themeOptions: ThemeOptions = {
  palette: {
    primary: {
      main: colors.primary,
    },
    secondary: {
      main: colors.secondary,
    },
    background: {
      default: colors.bg,
      paper: colors.bg,
    },
    // 现在可以正常添加自定义的muted颜色，且TypeScript不会报错
    muted: {
      main: colors.muted,
    },
  },
};

关键说明 #

• 使用declare module "@mui/material/styles"是TypeScript扩展第三方库类型的标准方式，能在不修改源码的情况下补充类型定义
• 同时扩展Palette（对应已创建的主题实例）和PaletteOptions（对应主题配置对象），确保两端都有类型提示
• PaletteOptions中的muted加了可选符号?，保证即使不配置该颜色，主题配置也不会触发类型错误

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