mui未正确更改颜色的React Button

Question

我的代码看起来类似于下面的

import { Button ) from '@mui/material';
import { makestyles } from '@mui/styles';

const useStyles = makeStyles ({
button: {
cursor: "pointer",
margin: "10px auto 20px auto",
width: "80%",
height: "50px",
borderRadius: "5px",
fontFamily: "Heiti SC",
color: "#f7f7f7",
backgroundColor: "#7dc241",
"&:hover": {
backgroundColor: "#679f35",
}
},
});
const form = () => {
return (
<form className={classes.form} onKeyDown={handleEnterDown} tabIndex="0">
<Grid container spacing={2}>
<Grid item xs={12} className={classes.formItem}>
<!-- email tag -->
</Grid>
<Grid item xs={12} className={classes.formItem}>
<!-- password tag -->
</Grid>
<Grid item xs={12} className={classes.formItem}>
<Button onClick={handleSubmit} className={classes.button}>
Log In
</Button>
</Grid>
</Grid>
</form>
)
}

按钮根据除颜色以外的所有内容正确渲染。即使在悬停时，它也会渲染默认的反应按钮颜色。我该如何解决这个问题？提前感谢！

我尝试更改<按钮>标记为默认的html<按钮>标签和颜色正确呈现。但我需要知道如何为mui<按钮>标签

我尝试了这个，它给出了相同的结果

import { styled } from '@mui/material/styles';
const ColorButton = styled(Button)(({ theme }) => ({
color: theme.palette.getContrastText(purple[500]),
backgroundColor: purple[500],
'&:hover': {
backgroundColor: purple[700],
},
}));

Answer 1

我使用这里的资源找到了它。从本质上讲，您必须针对特定的按钮变体并从中更改颜色。文本变体的解决方案如下：

const useStyles = makeStyles({
button: {
cursor: "pointer",
margin: "10px auto 20px auto",
width: "80%",
height: "50px",
borderRadius: "5px",
fontFamily: "Heiti SC",
"&.MuiButton-text": {
color: "#f7f7f7",
backgroundColor: "#7dc241",
"&:hover": {
backgroundColor: "#679f35",
},
},
},
});

对于其他按钮变体，您可以使用这些选择器

"&.MuiButton-root": {
border: "2px black solid"
},
"&.MuiButton-text": {
color: "grey"
},
"&.MuiButton-contained": {
color: "yellow"
},
"&.MuiButton-outlined": {
color: "brown"
}