组件的material-ui颜色只有主次答案

【问题标题】：Material-ui color of components is only primary and secondary组件的material-ui颜色只有主次
【发布时间】：2021-08-28 00:26:01
【问题描述】：

<Button variant="contained" color="success">save</Button>
<Button variant="contained" color="error">delete</Button>

两个按钮都显示default 颜色。

大多数组件的行为方式相同：success、info...它们都没有像我期望的那样工作。

我知道这不是错误，根据 API 文档，MaterialUI 的组件根本无法识别其他调色板的颜色，但这让我很烦恼。

为什么组件只能识别primary 和secondary 颜色？

我应该如何使用我的theme.palette 的颜色以便将它们应用于我的组件？

改变主题是实现我想要的效果的唯一选择吗？

【问题讨论】：

标签： material-ui

【解决方案1】：

根据Button API documentation，color 属性的可接受值为 'default'、'inherit'、'primary' 和 'secondary'。因此，Material UI 将无法识别color='success' 或color='error' 并显示相应的颜色。

我假设您正在尝试使用来自default theme 的success 和error 颜色。在默认主题对象中，success 和 error 的颜色可以分别在 theme.palette.success 和 theme.palette.error 中找到。

因此，我们可以使用以下方式访问默认主题颜色：

const useStyles = makeStyles((theme) => ({
  success: {
    backgroundColor: theme.palette.success.main
  },
  error: {
    backgroundColor: theme.palette.error.main
  }
}));

export default function ContainedButtons() {
  const classes = useStyles();

  return (
    <div>
      <Button variant="contained" classes={{ root: classes.success }}>
        Save
      </Button>
      <Button variant="contained" classes={{ root: classes.error }}>
        Delete
      </Button>
    </div>
  );
}

【讨论】：