反应：覆盖预制组件的按钮颜色

Question

我正在导入一个我从中获取按钮的库：

import Button from '@mui/material/Button';
  <Button variant="contained" onClick={() => props.chatIDState(chatRoom.chatIDFromTableChats)}>open</Button>

此按钮呈蓝色，但我想更改颜色。我尝试创建 css class 并尝试直接设置颜色，但均无效。

如何覆盖默认颜色并为其赋予最高渲染优先级？

Answer 1

根据文档你可以有类名

Css

.Button {
  color: black;
}

/* Increase the specificity */
.Button:disabled {
  color: white;
}

反应

<Button disabled className="Button">Click me</Button>

更新

内联样式

 <Button variant='contained' sx={{ backgroundColor: 'green' }}>HELLO</Button>

您还可以在 css 中添加 !important （不鼓励这样做），这将覆盖原生样式。

.Button {
  background: red !important;
}

反应

<Button className="Button">Click me</Button>

参考： https://mui.com/material-ui/customization/how-to-customize/

反应：覆盖预制组件的按钮颜色

react: override button color from premade component

reactjs