How to Add Hover Styling with MUI’s SX Prop (4 Examples)

Hover styling is a common requirement for UI components. However, it can be challenging in MUI to get the syntax correct to add hover using the sx prop. In this tutorial I show how to add hover styling to the Box, Button, Paper, and TextField components.

The components are below first with default styling and not hovered, then with custom hover styling:

The nested selectors are a little different with each component (the selector is a lot different with the TextField). I added borders to everything except the Paper component.

For the Paper component, I added heavier box shadow on hover which really makes the component pop.

If you want an extensive tutorial to the MUI sx Prop, read this post.

If you are still using makeStyles, check out these 5 hover selector examples.

Here’s a YouTube video version of this post or watch below:

MUI Box SX Hover Example

I add a border and change the text color and background color of the Box on hover in this example.

The Box component renders as a single div in the DOM:

This means that our nested selector for hover needs to target the hover pseudo-class applied directly to the Box root. In other words, there’s no space between the colon and the ampersand:

const boxSX = {
  "&:hover": {
    border: "1px solid #00FF00",
    color: 'gray',
    backgroundColor: 'lightblue'
  },
};

<Box sx={boxSX}>Hover Me!</Box>

MUI Button SX Hover Example

The MUI Button component has a border by default. In this example I update the border color on hover.

The Button renders as a button element and a span:

We want hover styling to apply to the root of the Button because that is where the border exists. Like the Box example, this means our selector syntax contains no spaces.

const buttonSX = {
  "&:hover": {
    borderColor: "rgba(255,240,10,0.8)",
  },
};

<Button sx={buttonSX} variant="outlined">
  Hover Me!
</Button>

MUI Paper SX Hover Example

In this example I increase the strength of the box shadow on hover of the Paper component.

The Paper component renders as a single div with some default styling.

The default box shadow is system value 1. I increased it to 3, and then on hover make it quite strong at 8. Box shadow on hover is a great trick for any component that needs a visual ‘pop’ on hover.

Since the Paper component is a single div, we want to apply the hover at the root level:

const paperSX = {
  boxShadow: 3,
  "&:hover": {
    boxShadow: 8,
  },
};

<Paper sx={paperSX}>Hover Me!</Paper>

MUI TextField SX Hover Example

In this example I change the border color on hover of a TextField component. Here is a detailed guide to changing TextField border color on hover, focus, disabled state, and more.

The TextField is a complex component composed of several MUI subcomponents. The outlined variant renders as more than five elements. I target the fieldset element seen in the DOM screenshot below.

The .MuiOutlinedInput-root class is only available on the ‘outlined’ variant. So is the fieldset element. This code selects fieldset elements that are children of elements with .MuiOutlinedInput-root and :hover applied.

An important consideration is that I could have included this selector in the styles object if I was going to style multiple ‘outlined’ TextFields. I would still be able to apply the styles object to all TextFields, and this selector simply wouldn’t find anything to select on other TextField variants. I encourage you to run the code in this tutorial, open dev tools, and explore how MUI has rendered the TextField.

const textfieldSX = {
  "& .MuiOutlinedInput-root:hover": {
    "& > fieldset": {
      borderColor: "orange",
    }
  }
};

<TextField sx={textfieldSX} label="Hover Me!"></TextField>

Resources and Related Links

Here’s how to add hover to icons using sx.

Here’s how to add Button hover with styled components (v4).

MUI SX Docs