How can I change the button color-CodePudding

Here in this one I have already declared the onClick but now I want to change the color of button whenever I click it should

<Button
              className={classes.button_reset}
              onClick={() => setShowResetPass((current) => !current)}
              
            >
              Reset Password
            </Button>

            <Button
              sx={{ ml: "20px" }}
              onClick={handleCancel}
              className={classes.button_light}
            >
              Cancel
            </Button>
            <Grid md={6} xs={12}>
              {showResetPass && (
                <>
                  <Typography
                    color="#05445E"
                    fontFamily="'Jost', sans-serif"
                    fontSize={15}
                    sx={{ mt: "20px" }}
                  >
                    Enter New Password
                  </Typography>
                  <Input
                    className={classes.inputEmail}
                    fullWidth
                    type="password"
                  />
                </>
              )}

This is the states I have used const [showResetPass, setShowResetPass] = useState(false);

CodePudding user response：

You could do something like that:

   <Button
          sx={{ ml: "20px" }}
          onClick={handleCancel}
          className={showResetPass ? classes.button_light : classes.button_dark }
        >