访问MUI主题中hues时出现TypeScript类型错误

我给Material UI主题定义了带多色调的自定义调色板：

createTheme({
  palette: {
    primary: {
      main: '#193C7D',
      dark: '#112853',
      light: '#2C4DBC',

      '900': '#112853',
      '600': '#16356F',
      '500': '#193C7D',
      '400': '#2C4DBC',
      '100': '#F0F6FF',
    },
  }
})

实际打印主题对象能看到这些色调值，但TypeScript里PaletteColor类型只包含dark、light、main三个属性。我想在styled组件里访问这些色调：

const c = styled(Component)(({ theme, color = 'primary' }) => ({
  color: theme.palette[color][600]
})

但TypeScript提示色调不存在于PaletteColor类型中。

疑问：为什么createTheme允许配置多色调，但类型系统不支持访问？是不是应该把调色板颜色类型设为PaletteColor & ColorPartial？

原因解析 #

createTheme是运行时API，不会做严格的类型校验，所以允许传入额外色调属性；但TypeScript的类型定义基于官方预设的PaletteColor接口，默认仅包含main、light、dark、contrastText这些标准属性，未涵盖自定义色调，因此出现类型不匹配报错。

解决方案 #

直接用PaletteColor & ColorPartial并非最优解，更规范的方式是扩展Material UI的类型定义：

1. 全局扩展PaletteColor类型
   在项目中创建类型声明文件（比如@types/material-ui.d.ts），扩展PaletteColor接口：

import { ColorPartial } from '@mui/material/styles/createPalette';

declare module '@mui/material/styles/createPalette' {
  interface PaletteColor extends ColorPartial {}
}

这样PaletteColor会自动包含ColorPartial中的所有100-900色调，TypeScript就能识别自定义属性。

2. 精准扩展特定色调
   如果只需要部分自定义色调，可针对性扩展：

declare module '@mui/material/styles/createPalette' {
  interface PaletteColor {
    100?: string;
    400?: string;
    600?: string;
    900?: string;
  }
}

3. 约束动态访问的类型
   针对theme.palette[color]的动态访问，需确保color参数是合法的调色板键：

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

const c = styled(Component)<{ color?: keyof Palette }>(({ theme, color = 'primary' }) => ({
  color: theme.palette[color][600]
}))

补充说明 #

官方不默认包含所有色调类型，是因为Material UI基础调色板以main、light、dark为核心属性，100-900属于扩展范畴，让用户手动扩展类型可保持类型系统的灵活与轻量化。

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