Changing material ui IconButton hovered style doesn't work

user_11866037 0
Viewed 662

I am trying to make the custom hovered style of IconButton and I am doing it as

const useStyles = makeStyles((theme) => ({
  root: {
    "&:hover": {
      borderRadius: "4px",
      padding: "3px",
    },
  },
}));

return (
  <div className="App">
    <IconButton aria-label="previous" className={classes.root}>
      <ArrowLeftIcon />
    </IconButton>
  </div>
);

But when I hover it, it's flickering and not changing smoothly. I think I am missing some styles to add, but I can't find a way what I'm doing wrong. You can see my codesandbox example here.

material-ui reactjs
2 Answers

If you look at the default styles for IconButton, you'll find that the borderRadius and padding are set directly in the root styles. Only the backgroundColor changes on hover.

If you make the corresponding change to your styles, then it works fine:

const useStyles = makeStyles((theme) => ({
  root: {
    borderRadius: "4px",
    padding: "3px"
  }
}));

Edit IconButton borderRadius

user_74959300

It's flickering on hover because the padding (the space between its content and border) is modified. Either remove the padding or put it in the default style.

not changing smoothly

This can be easily solved by using css transition. Material-UI theme has a utility method theme.transition.create() to help you create transition quickly.

const useStyles = makeStyles((theme) => ({
  root: {
    transition: theme.transitions.create(["border-radius"]),
    // padding: 3;

    "&:hover": {
      borderRadius: "4px"
    }
  }
}));

Live Demo

Edit jovial-snow-53eno

user_94494260
Related