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:
Material UI Button Remove Hover Style
There are two methods for removing hover styling on MUI Buttons:
- Use
sxand 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 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.
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:
Another method is to use the sx prop and the theme shadow values:
sx={{boxShadow: 0}}Resources
Here’s how to remove Button hover styling in the Ant Design component library.
I also attempted wrapping a Button in CSSBaseline, and that did not remove the hover focus, or shadow as hoped.
