Material-UI IconButton remove hover effect

Today’s video is one of the popular questions that comes up when developers are using the Material-UI IconButton component.

Full Transcript

Today’s video is one of the popular question that comes up when developers are using Material-UI <IconButton> component. For the purposes of this video, I already created a React project in CodeSandbox and added the dependencies for the @material-ui/core and, @material-ui/icons

In this code I used the <IconButton> component from the library with a HomeIcon inside it. The home icon comes from the material-ui icons library, but you can place a different image on this button. You will notice this round or sometimes an elliptical shape when we hover on this Icon Button. This is the hover effect on the Icon Button. There are times when we want to get rid of this hover effect.

In today’s video we will look at you can remove this hover effect from an icon button.

If we want any kind of customisation to the Material-UI components, the best way is to go to their API documentation. https://material-ui.com/api/icon-button/

Here we can see quite a few props but there is nothing that can help us get rid of the hover effect. So what should you do next? Well..if you come further down, there is a GitHub link to the implementation of that component. So let’s click on that, here is the code for IconButton Component. You will find everything you need to know about this component. https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/IconButton/IconButton.js

Our goal is to remove the background color on hover. You can see all we need is to override the styles on this root element on top of which IconButton is built. It has some default styles on the hover property which we can override in our code.

So let’s go back to the code and import makeStyles function that takes as input 2 parameters. A styles object and an optional parameter for more options. Instead of passing a styles object, you can also pass a function as a parameter to MakeStyles if you need access to the theme. But we are not using theme, so we will stick with the object.

Let’s have a root class and we can override the background color of the hover by giving the ampersand which is the selector for the parent class while nesting, then : for the pseudo class on root and give it a value “transparent”

Now coming back to the component, makeStyles returns a hook. That’s why we called the resulting hook useStyles. We will call useStyles() here and get the classes which can then be passed to the IconButton className prop. To get the classname we will call {classes.root}.

As you can see when we hover on the <IconButton>, the background color is gone. So this is how you can remove the hover effect from the <IconButton> component from Material-UI.

That’s all I wanted to cover in this video. Thanks for watching and I will see you in the next video.