如何在MUI中为按钮设置原色？

Question

我是 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. 

这个怎么做？

Answer 1

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

您有几个选择：

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

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