ReactJS中如何修改/自定义MUI按钮点击时的样式？

一、修复点击时的背景色样式 #

你当前代码把:active嵌套在了&:hover内部，这会导致点击样式仅在hover状态下生效，正确写法是将&:active与&:hover放在同级：

<Box component="center">
  <Button 
    sx={{
      // 默认状态样式
      backgroundColor: 'transparent',
      color: 'black',
      '&:hover': {
        color: 'red',
        backgroundColor: 'transparent',
      },
      '&:active': {
        backgroundColor: 'transparent',
        color: 'red' // 可选：点击时保持文字红色
      },
    }}
  >
    <Typography
      sx={{
        mt: 0.5,
        textDecorationLine: "underline",
        textTransform: 'none'
      }}
    >
      Already have an account? Log in!
    </Typography>
  </Button>
</Box>

二、控制涟漪效果 #

MUI Button 自带disableRipple属性，直接配置即可启用或禁用涟漪：

• 禁用涟漪：添加disableRipple={true}
• 启用涟漪：移除该属性（默认启用）或设置disableRipple={false}

示例代码（禁用涟漪）：

<Box component="center">
  <Button 
    disableRipple={true}
    sx={{
      backgroundColor: 'transparent',
      color: 'black',
      '&:hover': {
        color: 'red',
        backgroundColor: 'transparent',
      },
      '&:active': {
        backgroundColor: 'transparent',
        color: 'red'
      },
    }}
  >
    <Typography
      sx={{
        mt: 0.5,
        textDecorationLine: "underline",
        textTransform: 'none'
      }}
    >
      Already have an account? Log in!
    </Typography>
  </Button>
</Box>

内容的提问来源于stack exchange，提问作者NGIP