Material UI主题定制：模块增强修改Color类型未生效原因咨询

为什么原有类型没被覆盖？ #

TypeScript的接口合并机制是追加属性，而非覆盖。Material UI的@mui/material模块里，原本的Color接口已经定义了200: string | undefined。当你在自定义模块增强里声明200: unknown时，TypeScript会自动将两个类型做交集运算，最终得到的类型是string | undefined & unknown，结果还是string | undefined，所以你的修改不会生效，自然也不会触发类型错误。

正确的修改方式 #

如果要强制覆盖已有属性的类型，需要先排除原有接口的对应属性，再重新定义：

declare module "@mui/material" {
  // 先通过Omit排除原有Color接口的200属性
  interface Color extends Omit<Color, '200'> {
    10: string;
    20: string;
    60: string;
    100: string;
    200: unknown; // 现在这个类型会覆盖原有定义
  }
}

如果你的目标是减少可用灰色调的数量，更合理的做法是直接不声明不需要的灰度属性，同时确保TypeScript开启strict模式（尤其是strictNullChecks），这样在尝试使用未声明的灰度值时就会触发类型错误：

declare module "@mui/material" {
  interface Color {
    10: string;
    20: string;
    60: string;
    100: string;
    // 不声明200、300等不需要的属性
  }
}

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