How to change mui button color on hover in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change mui button color on hover in React js, you can use inline css sx prop with :hover It will change mui button color on hover.

See a short example of using the sx prop to change the button color on hover.

<Button
  variant="contained"
  sx={{
    ":hover": {
      bgcolor: "#AF5",
      color: "white"
    }
  }}
>
My Button
</Button>

Here, In this article, I will show you 2 ways to change mui button hover color.

1. Using sx attribute
2. Using className attribute

Just in case you don’t know, you can use the second solution on any component it’s a generic solution that works even if you use native components like buttons, input, etc.

So, let’s start with the installation process, for mui library.

Installation

Install the following packages to use mui button color on hover in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

MUI material change mui button color on hover example using sx prop.

In this example, I will change the button background color and text color on hover using the button sx prop.

In the sx prop, First, you have to pass :hover as a key, and in the value set your background color and text which you want to see on the hover.

App.js

import Button from "@mui/material/Button";

const MyButton = () => {
  return (
    <Button
      variant="contained"
      sx={{
        ":hover": {
          bgcolor: "#AF5",
          color: "white"
        }
      }}
    >
      My Button
    </Button>
  );
};

export default MyButton;

Here, we are provided code sandbox links for the above program material ui button change color on hover example. Then you can use it whenever you want and do the changes as per your requirements.

Try it Yourself

MUI material change mui button color on hover example using className prop.

In this example, I will change the button background color and text color on hover using the button className prop.

In the className prop, I passed one custom class and the styles.css file created a class with :hover and put desired css changes when the user hovers on the button.

App.js

import Button from "@mui/material/Button";
import "./styles.css";

const MyButton = () => {
  return (
    <Button variant="contained" className="my-button">
      My Button
    </Button>
  );
};

export default MyButton;

styles.css

.my-button:hover {
  background-color: #838383 !important;
  color: #aadd33 !important;
}

Here, we are provided code sandbox links for the above program material ui button change color on hover example using custom class. Then you can use it whenever you want and do the changes as per your requirements.

Try it Yourself

All the best 👍