CODEWITHSUNDEEP
reactjsmaterial-ui
Kaung Khant Zaw
Kaung Khant Zaw

Reputation: 1638

Changing material ui IconButton hovered style doesn't work

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.

Upvotes: 2

Views: 1816

Answers (2)

NearHuscarl
NearHuscarl

Reputation: 81340

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

Upvotes: 0

Ryan Cogswell
Ryan Cogswell

Reputation: 80986

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

Upvotes: 1

Related Questions