我如何改变/自定义风格时MUI按钮点击在reactjs?

Question

我试图改变按钮的外观，当我点击它，但我认为它不工作在reactjs像你如何改变按钮将如何行动，就像在正常的CSS，我想改变按钮的背景颜色，当我点击它，也禁用或启用涟漪效应。

<Box component="center">
<Button sx={{
'&:hover': {
color: 'red',
backgroundColor: 'transparent',
':active':{
backgroundColor: 'transparent'
},

},
}} >
<Typography
sx={{
mt: 0.5,
textDecorationLine: "underline",
textTransform: 'none',
color: 'black'
}}
>
Already have an account? Log in!
</Typography>
</Button>
</Box>

Answer 1

您的样式对象中存在语法错误，这就是自定义不起作用的原因。您必须将hover和active状态的样式作为两个单独的对象传递。

对于禁用连锁反应，您可以将disableRipple传递给您的Button组件来关闭连锁反应。

const styleObj = {
"&:hover": {
backgroundColor: "red"
},
"&:active": {
backgroundColor: "blue"
}
};
...
<Button disableRipple sx={styleObj} variant="text">
Text
</Button>