扩展MUI v5 Chip颜色时出现'Cannot read property 'contrastText''错误

问题原因 #

你自定义了Chip的not-ready颜色，但MUI的Chip组件渲染时会读取对应调色板颜色对象里的contrastText属性来设置文字颜色，而你当前的调色板中没有为自定义颜色提供完整的颜色结构（缺少main和contrastText）。

正确解决方案 #

1. 修改palette.ts，添加完整的自定义颜色对象

在调色板根节点下添加自定义颜色（和primary、warning同级），必须包含main（背景色）和contrastText（文字对比色）：

export const palette = {
  primary: {
    25: '#FCFAFF',
    // 补充primary的核心属性（如果之前没加）
    main: '#6200ee',
    contrastText: '#ffffff',
    // 其他已有颜色属性
  },
  warning: {
    main: '#ff9800',
    contrastText: '#ffffff',
    // 其他已有颜色属性
  },
  success: {
    main: '#4caf50',
    contrastText: '#ffffff',
    // 其他已有颜色属性
  },
  // 添加自定义的not-ready颜色
  'not-ready': {
    main: '#e57373', // 示例红色背景
    contrastText: '#ffffff' // 白色文字，确保和背景有足够对比度
  }
};

2. 确保主题配置正确

在theme.ts中，你已经通过ChipPropsColorOverrides声明了not-ready作为合法颜色值，现在只需要确保主题正确使用修改后的调色板：

import { createTheme } from '@mui/material/styles';
import { palette } from './palette';

const themeOptions = {
  palette
};

let theme = createTheme(themeOptions);
theme = createTheme(theme, { 
  // 你的部分组件样式配置
});

declare module '@mui/material/Chip' {
  interface ChipPropsColorOverrides {
    'not-ready': true;
  }
}

export default theme;

3. 使用自定义颜色的Chip

现在可以直接在Chip组件中使用color="not-ready"：

<Chip label="未就绪" color="not-ready" variant="filled" />

关键注意点 #

• 所有用于MUI组件的调色板颜色（包括自定义的），都需要包含main和contrastText两个核心属性，组件会依赖这两个值来渲染正确的背景和文字颜色。
• 自定义颜色必须放在调色板的根层级，和内置的primary、secondary等颜色同级，不能嵌套在已有颜色对象下。

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