MUI v4自定义调色板新增tertiary颜色后Button组件报错咨询

API 探路者

2026-10-2

MUI v4 Button组件自定义颜色报错解决方案

问题本质说明

该问题既不是框架bug，也不是官方文档说明有误。
官方文档的「新增自定义颜色」指引仅针对全局调色板（Palette）的配置扩展，并不代表扩展调色板后，内置组件的color属性枚举会自动同步更新。
MUI v4内置Button组件的color属性的PropType校验规则为硬编码逻辑，仅支持default、inherit、primary、secondary四个可选值，直接传入自定义的tertiary值会触发校验报错，错误提示如下：

Failed prop type: Invalid prop color of value tertiary supplied to ForwardRef(Button), expected one of ["default","inherit","primary","secondary"].

可行解决方案

方案1：封装自定义样式的Button组件（推荐）

基于官方Button封装带自定义颜色的独立组件，直接关联全局调色板的自定义颜色配置：

import { Button, styled } from '@material-ui/core';

const TertiaryButton = styled(Button)(({ theme }) => ({
  backgroundColor: theme.palette.tertiary.main,
  color: theme.palette.tertiary.contrastText,
  '&:hover': {
    backgroundColor: theme.palette.tertiary.dark,
  }
}));

// 调用方式
<TertiaryButton variant="contained">
  三级按钮
</TertiaryButton>

方案2：使用makeStyles局部覆盖样式

无需封装新组件，通过类名覆盖实现自定义颜色效果：

import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles((theme) => ({
  tertiaryBtn: {
    backgroundColor: theme.palette.tertiary.main,
    color: theme.palette.tertiary.contrastText,
    '&:hover': {
      backgroundColor: theme.palette.tertiary.dark,
    }
  }
}));

function Demo() {
  const classes = useStyles();
  return <Button className={classes.tertiaryBtn}>三级按钮</Button>
}