CODEWITHSUNDEEP
reactjsmaterial-uistyling
sopatd
sopatd

Reputation: 27

How to change Button Color onClick Material-UI, React

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

Upvotes: 2

Views: 18889

Answers (2)

SaimumIslam27
SaimumIslam27

Reputation: 1188

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>
  );
}

Upvotes: 9

Eran Amarante
Eran Amarante

Reputation: 63

Use either

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

Upvotes: 0

Related Questions