在reactjs中单击MUI按钮时如何更改/自定义样式？

Question

I'm trying to change the button appearance when i clicked it, but i think it doesn't work in reactjs like how you change how button will act just like in normal CSS, I want to change the background color of the button when i clicked it, also disable or enable the ripple effect.

<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

You have syntactic errors in your style object and this is the reason why customization doesn't work. You have to pass styles for hover and active states as 2 separate objects.

As for disabling ripple effect, you can pass disableRipple to your Button component to turn off ripple effect.

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