CODEWITHSUNDEEP
reactjsmaterial-ui
SDK
SDK

Reputation: 1518

How to disable IconButton ripple effect in Material UI?

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

Upvotes: 8

Views: 17716

Answers (3)

lidkxx
lidkxx

Reputation: 2831

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',
    },
  },
}));

Upvotes: 4

Michael Miller
Michael Miller

Reputation: 51

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

Upvotes: 0

Gaspar Teixeira
Gaspar Teixeira

Reputation: 1267

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/

Upvotes: 18

Related Questions