how to disable mui button hover effect in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To disable mui button hover effect in React js, here use inline css sx={{"&:hover": {backgroundColor: "#1976d2" }}}. It will disable mui button hover effect.

Today, I am going to show you, how to disable mui button hover effect in react js.

Installation

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

npm

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

yarn

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

MUI material disable mui button hover effect example.

The below code is an example of disable mui button hover effect using mui.

App.js

import * as React from "react";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";

export default function ColorButtons() {
  return (
    <Stack direction="row" spacing={2}>
      <Button
        variant="contained"
        sx={{ "&:hover": { backgroundColor: "#1976d2" } }}
      >
        hover
      </Button>
    </Stack>
  );
}

In the above code example, I have used the @mui/material component and disable mui button hover effect of MUI.

Check the output of the above code example.

If you want to disable the hover effect mui button. you have to provide the default background color on hover.

All the best 👍