how to disable mui button hover effect in react js?
December 11, 2022Hi 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 👍