如何更改按钮颜色 onClick Material-UI，反应

Question

I'm working on a small project and want to change the color of a button when it is clicked. I'm not sure how to go about it and would appreciate any help. I'm working in React and using the Material-UI library for styling.

Thank You

Answer 1

import React from "react";
import Button from "@material-ui/core/Button";

export default function ButtonClick() {
  const [flag, setFlag] = React.useState(true);

  const handleClick = () => {
    setFlag(!flag);
  };

  return (
    <Button
      onClick={handleClick}
      variant="contained"
      color={flag ? "primary" : "secondary"}
    >
      button
    </Button>
  );
}

Answer 2

Use either

1. creating a theme - https://material-ui.com/customization/palette/
2. makeStyles - https://material-ui.com/styles/basics/