Hover effect on IconButton in Material-UI

Question

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>

Answer 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>

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

Answer 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:

• bg color
• bg color on hover

Answer 4

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