How to disable IconButton ripple effect in Material UI?

user_9702455 0
Viewed 10468

I am having a AppBar with IconButton in it. While hovering the button it shows a oval hover in it . I tried to disable it by giving

disableFocusRipple={true}

But it doesnt works.Please help me with that.

Here i am sharing the image of the hover

material-ui reactjs
3 Answers

You might use the property disableRipple. if true it will disable the ripple effect. disableFocusRipple only works when disableRipple is true. But you have a price on that. You loose some state styles. Take a look at the API docs. https://material-ui.com/api/button/

user_10168830

For some reason none of the disableRipple properties has worked for me, but I was able to disable ripple effect on an IconButton by just making its hover background colour transparent.

Code:

<IconButton className={classes.disableRipple} aria-label="View">
  <InfoIcon/>
</IconButton>

Then just style it like so (or any other way you want to style it, can be inline):

const useStyles = makeStyles(() => ({
  disableRipple: {
    '&:hover': {
      backgroundColor: 'transparent',
    },
  },
}));
user_14704790

Ripple is the animation that occurs when clicked or on focus (not by default I think). What you are looking for is the hover background color. You should be able to unset the color by overriding the css:

.MuiButtonBase-root:hover {
        background-color: unset;
    }
user_82979580
Related