'Hover effect on IconButton in Material-UI

IconButton Hover

This is an iconButton from Material-UI that I am using. As you can see there is a slight grey border around the icon when you hover on it. What is the property to disable this? I have not found it in Material-UI docs, and I need to get rid of this grey hover feature.

Code:

<IconButton>
    <BackButton />
</IconButton>

javascript reactjs material-ui c#visual-studio .net-core visual-studio-debugging

Solution 1:^[1]

(Alternative Way)

You can also override the IconButton style via MuiThemeProvider:

import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiIconButton: {
      root: {
        '&:hover': {
          backgroundColor: "$labelcolor"
        }
      }
    }
  }
})

And Wrap your component that you want to edit with this code:

<MuiThemeProvider theme={theme}>

// Your Component here

</MuiThemeProvider>

Solution 2:^[2]

There is no property to disable it. You'll just have to override the CSS:

<IconButton className={"MyCustomButton"}>
    <BackButton />
</IconButton>

With a css rule like:

.MyCustomButton:hover {
  background-color: inherit !important;
}

Solution 3:^[3]

It is possible to use makeStyles(styles) hook logic to change default material-ui IconButton CSS Pseudo-classes e.g. :hover style

code example:

import { makeStyles } from "@material-ui/core/styles";
import { IconButton } from "@material-ui/core";
import ArrowBackIcon from "@material-ui/icons/ArrowBack";

const useStyles = makeStyles((theme) => ({
  myClassName: {
    backgroundColor: "#EFD26E",
    position: "relative",
    "&:hover": {
      backgroundColor: "green"
    }
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton color="inherit" className={classes.myClassName}>
        <ArrowBackIcon />
      </IconButton>
    </div>
  );
}

screens:

Solution 4:^[4]

<IconButton sx={{ "&:hover": { color: "green" } }}>
    <BackButton />
</IconButton>

Solution 5:^[5]

You can use hoverColor: Colors.transparent :

IconButton(
  hoverColor: Colors.transparent, 
  icon: Icon(Icons.clear_rounded),
  onPressed: () {},
),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Konstantinos Kalaras Lafkiotis
Solution 2	Kevin Raoofi
Solution 3	Demsource
Solution 4	alberto gutierrez
Solution 5	Aldous S.

'Hover effect on IconButton in Material-UI

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]