如何在MUI中为Button设置原色？

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

  <Button
        style={{ backgroundColor: "#f8ad33" }}
        variant="contained"
        // color="primary"
        onClick={handleSubmit(onSubmit)}
      >
        Register
      </Button>

Answer 2

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

您有几个选择：

• 手动覆盖此按钮的样式。 （不理想）。
• 创建一个类来指定您想要的颜色，并提供十六进制颜色代码作为背景颜色。 （也不理想）。
• 使用 makeStyles 创建一个 JSX 类，该类将应用程序的主题作为参数，并直接从主题提供

  primary.light

  颜色。 （我不确定这在 Material UI 版本 5 中是否已经过时，但在 v4 中通常是这样做的）。

在您的情况下，快速查看文档可能是最简单的Here，其中显示了如何使用主题和从 mui/material/styles 导入的

styled

函数自定义按钮上的颜色。

Answer 3

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

我用了这个文档

Answer 4

一个 hacky 解决方法是使用定义的主题颜色，然后用 sx 属性覆盖。

  <Button
    color={'primary'}
    variant='contained'
    onClick={() => toggle(true)}
    sx={{width: '100%', bgcolor: 'primary.dark', '&:hover': {bgcolor: 'primary.light'}}}
  >
    comments
  </Button>

Answer 5

我相信这是设计所阻止的。

Button 组件旨在获取 color，并使用颜色 main 键。

您可以使用

ButtonPropsColorOverrides

来允许更多颜色值，这在您向主题添加更多颜色时很有用，但仍然 - 您将获得颜色的主键，并且无法访问其他颜色键。

我相信这种设计是为了保持色彩系统的完整性。您不应该使用

primary.light

键，因为它可能用于其他效果（例如悬停）。

请注意，您可以对其他一些组件使用内部颜色键，例如排版：

<Typography variant="body2" color="primary.light">Hello</Typography>

Answer 6

您可以在主题文件中使用类似的内容：

   declare module '@mui/material/Button' {
    interface ButtonPropsColorOverrides {
        'primary.dark': true
        'primary.light': true

    }
}

另外这个答案帮助了我