TypeScript中Material UI自定义调色板属性未生效问题

1. 补全类型扩展 #

仅扩展PaletteColor接口还不够，需要同步扩展Palette接口，确保Material UI的主题类型能识别自定义调色板字段。修改类型声明部分：

declare module "@mui/material/styles" {
  interface PaletteColor {
    main: string;
    ten: string;
    twenty: string;
    thirty: string;
    forty: string;
    fifty: string;
    sixty: string;
    seventy: string;
    eight: string;
    ninty: string;
    nintyFive: string;
  }

  // 让Palette接口中的primary使用扩展后的类型
  interface Palette {
    primary: PaletteColor;
    // 若需要给secondary、error等也加自定义字段，同样在此声明
  }
}

// 必须添加这行，让TypeScript应用类型扩展
export {};

2. 检查customPalette的正确性 #

确认customPalette已正确定义，属性名与主题中使用的完全匹配，示例如下：

// 替换成你的实际颜色值
const customPalette = {
  primary10: "#e0f2fe",
  primary20: "#bae6fd",
  primary30: "#7dd3fc",
  primary40: "#38bdf8",
  primary50: "#0ea5e9",
  primary60: "#0284c7",
  primary70: "#0369a1",
  primary80: "#075985",
  primary90: "#0c4a6e",
  primary95: "#134e6f"
};

如果是从外部文件导入，检查导入路径和拼写，避免因未正确导入导致值为undefined。

3. 确保类型声明被TS识别 #

• 将类型声明放在单独的.d.ts文件（比如src/theme.d.ts），并在tsconfig.json的include数组中包含该文件：

  {
    "include": ["src/**/*", "src/theme.d.ts"]
  }
  

• 若在组件文件内写类型声明，确保文件是模块（存在import/export语句），否则需要用declare global包裹类型扩展。

4. 验证主题使用 #

创建主题后若仍有类型提示问题，可手动指定主题类型：

import { useTheme, Theme } from "@mui/material/styles";

const MyComponent = () => {
  const theme = useTheme<Theme>();
  console.log(theme.palette.primary.ten); // 此时应能正确获取值
  return <div style={{ color: theme.palette.primary.ten }}>测试文本</div>;
};

额外排查点 #

• 检查拼写：代码中的ninty属于拼写错误（正确为ninety），若customPalette中对应属性是primary90，则主题字段名无问题，但需确保属性名完全匹配，否则会导致值undefined。
• 确认createTheme配置无语法错误，比如对象括号是否闭合。

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