Remove Hover, Shadow, and Focus Styling from MUI Buttons

MUI Buttons come with focus and hover styling by default. The contained variant also has some shadow on it. In this tutorial we will explore several options for removing these styles.

Here are the Buttons we will build to remove hover, focus, and shadow using props and sx:

MUI Button Examples With No Hover, Focus, or Shadow
MUI Button Examples With No Hover, Focus, or Shadow

Material UI Button Remove Hover Style

There are two methods for removing hover styling on MUI Buttons:

  • Use sx and set hover to transparent
  • Use the ButtonBase component instead of the Button

The MUI Button has lots of default styling beyond just hover, especially if you choose a variant such as contained or outlined. If you want to keep this styling and only remove hover, use the following code:

<Button sx={{"&:hover": {backgroundColor: "transparent", }}}></Button>

This adds a transparent background on hover. The transparent value overrides the default blue background set on hover.

MUI Button Hover DOM
MUI Button Hover DOM

MUI also adds text-decoration: none on hover. However, the Button also has text-decoration: none when it’s not hovered. If you have custom text decoration values, you may also need to adjust this property.

If you want to remove hover styling with less code and don’t need other Button default styling, use the ButtonBase:

<ButtonBase>Base</ButtonBase>

You may also want to add the disableRipple: true prop. For some reason, the ripple is left on the ButtonBase even though all other styling is removed.

This creates the completely unstyled Button seen at the top of the image in the intro section. Here are more examples of custom button styling.

Material UI Button Remove Focus Style

The MUI Button does not directly have focus pseudo class styling. However, it does have some keyboard focus styling and click styling. We can remove these with a couple of props:

<Button disableRipple disableFocusRipple></Button>

In combination with removing hover, the button will not show any indication of mouse or keyboard events.

If you need to add custom focus styling on the Button, I recommend using a selector that targets the Mui-focusVisible class. This is automatically added to the Button when it receives focus and makes styling easy.

MUI Button Focus DOM
MUI Button Focus DOM

Material UI Button Remove Shadow

The contained Button variant is the only one that receives shadow by default. Shadow is also known as elevation in MUI, and the easiest way to remove shadow is to use the disableElevation prop.

<Button variant="contained" disableElevation>No Elevation</Button>

This code creates the third button seen in the intro image.

Here’s the result in the DOM:

MUI Button With No Shadow in DOM
MUI Button With No Shadow in DOM

Another method is to use the sx prop and the theme shadow values:

sx={{boxShadow: 0}}

Resources

I also attempted wrapping a Button in CSSBaseline, and that did not remove the hover focus, or shadow as hoped.

MUI Button API

MUI Button Base API

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.