如何在 MUI 中将主光色设置为按钮？答案

【问题标题】：How to set Primary light colors to Button in MUI?如何在 MUI 中将主光色设置为按钮？
【发布时间】：2022-07-08 22:05:31
【问题描述】：

我是 Material UI 和 react js 的新手，我只是尝试添加 2 个按钮，一个是原色，另一个是原色。我该怎么做呢

我正在使用情感库。这就是我尝试过的。我不是想改变原色的默认颜色，我想在我的按钮上使用默认的原色

<Button variant="contained" >Primary Button</Button>
<Button variant="contained" color="secondary" >secondary Button</Button>

以上 2 个按钮按预期工作。

<Button variant="contained" color="primary-light" >secondary Button</Button> //I know the syntax is wrong.

如何做到这一点？

【问题讨论】：

【解决方案1】：

“primary-light”不是 MUI 按钮支持的颜色之一。您可以在此处的文档中看到 here

你有几个选择：

手动覆盖此按钮的样式。（不理想）。
创建一个指定所需颜色的类，并提供十六进制颜色代码作为背景颜色。（也不理想）。
使用 makeStyles 创建一个 JSX 类，该类将应用程序的主题作为参数，并直接从您的主题中提供 primary.light 颜色。（我不确定这在 Material UI 的第 5 版中是否已过时，但这是您在 v4 中通常会这样做的方式）。

在您的情况下，快速查看文档Here 可能是最简单的方法，该文档显示了如何使用您的主题和从 mui/material/styles 导入的 styled 函数自定义按钮上的颜色。

【讨论】：

【解决方案2】：

我必须在主题对象中创建“primaryLight”颜色属性才能使用。还必须添加类型以便 Button 可以接受“primaryLight”。

我用过这个document

【讨论】：