如何在MUI主题中配置自定义色系并调用不同色阶值

步骤1：扩展TypeScript类型声明（TS项目必做） #

MUI默认的Palette类型没有你自定义的cat1等分类字段，需要先扩展类型避免TS报错，在theme.tsx文件头部或者项目全局的typings.d.ts中添加如下声明：

declare module '@mui/material/styles' {
  interface Palette {
    cat1: PaletteColor
  }
  interface PaletteOptions {
    cat1?: PaletteColorOptions
  }
}

如果需要支持更多分类，比如cat2、cat3，在上面的两个接口里追加对应字段即可。

步骤2：修正主题配置 #

你之前仅给cat1传入了只包含main的对象，自然无法获取200等其他色阶。如果要保留完整色阶，直接把整个色系对象赋值给自定义分类即可，同时可以手动指定main主色值：

import { createTheme, Theme } from '@mui/material/styles'
import { red, blue } from '@mui/material/colors' // 补全之前遗漏的blue导入

export const theme: Theme = createTheme({
  palette: {
    primary: {
      main: blue[800]
    },
    secondary: {
      main: '#19857b'
    },
    // 自定义分类色，既保留red的所有色阶，也指定main主色
    cat1: {
      ...red,
      main: red[700]
    }
  }
})

如果不需要用MUI预设的色系，也可以自行定义全色阶：

cat1: {
  50: '#ffebee',
  100: '#ffcdd2',
  200: '#ef9a9a',
  // 其余色阶按需补充
  main: '#c62828' // 对应red[700]
}

步骤3：组件内正确引用色值 #

推荐使用MUI提供的useTheme hook获取主题实例，比直接导入静态theme对象兼容性更好（支持主题动态切换场景），修正后的circle.tsx代码如下：

import CircleIcon from '@mui/icons-material/FiberManualRecord'
import { useTheme } from '@mui/material/styles'

export function Circle() {
  const theme = useTheme()
  return (
    <>
      <CircleIcon style={{ color: theme.palette.cat1.main }} />
      <CircleIcon style={{ color: theme.palette.cat1[200] }} />
    </>
  )
}

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