How to Use Hover with Material-UI makeStyles (5 Examples)

The primary method for styling MUI v4 components is the makeStyles hook. MUI v5 recommends the sx prop or styled API, but the makeStyles hook is still supported. This post shows five interesting examples of hover styling using the makeStyles hook:

• hover on a label (uses v5 makeStyles import)
• hover on Buttons nested in a Stack component (v5 import)
• hover on Buttons nested in a Box component (v4 import)
• hover on Avatar in Chip, a nested component with default classes (v5 import)
• hover on Select component, requiring an advanced nested selector (v5 import)

Full code for these examples is in the Resources section.

MUI makeStyles hover on Label

A FormLabel component renders as a single label element in the DOM. There are no child elements that need to be targeted for hover. This is the simplest example for adding hover with makeStyles.

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  labelRoot: {
    "&:hover": {
      borderRadius: 4,
      backgroundColor: "gray",
    },
  }
})

//inside the function component
const classes = useStyles();
<FormLabel className={classes.labelRoot}>Hover Me!</FormLabel>

Notice the &:hover selector. There is no space between & and :, so this selector looks for the hover pseudo class on the same element that has the labelRoot class.

Here’s a guide to all the different labels in MUI.

MUI makeStyles Hover on Child Button

In this example I added some styling to a Stack component using makeStyles. I also wanted the child Buttons it wraps to have red text color when the Buttons are hovered.

Using nested selectors in makeStyles allowed me to only use the existing stackRoot class instead of creating a new class for the Buttons.

import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  stackRoot: {
    border: "1px solid gray",

    "& button:hover": {
      color: "red",
    },
  }
}}

//inside the function component
const classes = useStyles();
<Stack direction="column" spacing={2} className={classes.stackRoot}>
  <Button>Hover 1</Button>
  <Button>Hover 2</Button>
</Stack>

Notice the space between & and button:hover. This tells the CSS selector that it is looking for a button element that is a child of the Stack.

If I had instead created nested selector “&:hover button”, then both Buttons would get red text when the Stack component was hovered.

Here’s the BEST guide to MUI Button color.

Material-UI makeStyles Hover on Child (v4)

This example is just like the previous example, except that I will create it with MUI v4 code. The Stack component is not available in MUI v4 and the makeStyles import is different:

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  boxRoot: {
    border: "1px solid gray",
    "& button:hover": {
      color: "red",
    },
  }
}}

//inside the function component
const classes = useStyles();
<Box className={classes.stackRoot}>
  <Button>Hover 1</Button>
  <Button>Hover 2</Button>
</Box>

The syntax inside the hook is the same. It’s only the import that has been updated from version four to version five.

MUI makeStyles Hover on Chip Nested Component

The Chip component may be composed of several subcomponents, depending on what props you use.

In this example, I passed an Avatar component to the avatar prop. This renders as a div which wraps another div (the avatar) and a span (the chip label text).

We can use this knowledge of the DOM to construct two separate nested selectors in our useStyles const:

import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  chipRoot: {
    marginBottom: 16,
    "&:hover .MuiAvatar-root": {
        color: "orange",
      },
    "& .MuiAvatar-root:hover": {
      color: "red",
    }
  }
});

const classes = useStyles();
<Chip
  className={classes.chipRoot}
  avatar={<Avatar>M</Avatar>}
  label="Avatar Chip"
/>

The "&:hover .MuiAvatar-root" selector will trigger when the Chip component is hovered over.

The "& .MuiAvatar-root:hover" selector will trigger when the Avatar portion of the Chip is hovered. It makes a big difference where the hover pseudo selector is placed.

Here’s the side-by-side difference in the hover effect:

Here’s an excellent guide to styling MUI Chips.

MUI makeStyles Hover on Select Component

Hover on the Select component is the most complex example I will show. The Select is composed of several subcomponents, and I also added variant="outlined" so that it has a border. We will add color to the border on hover.

Take a look at the selector in the selectRoot class. We need to add the .MuiOutlinedInput-notchedOutline class selector. The challenge is, that selector only exists when variant is “outlined” and I had to explore the DOM to find that class.

import { makeStyles } from "@mui/styles";
const useStyles = makeStyles({
  selectRoot: {
    "&:hover .MuiOutlinedInput-notchedOutline": {
        borderColor: 'red'
    }
  }
});

const classes = useStyles();
<Select className={classes.selectRoot} variant="outlined"></Select>

When you need to style complex MUI components, explore the DOM or take a look at the component’s CSS API in the MUI docs in order to find the classes available for targeting in your selectors.

Here’s a complete guide to the Select component.

Resources

import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { makeStyles } from "@mui/styles";
import { FormLabel } from "@mui/material";
import Chip from "@mui/material/Chip";
import Avatar from "@mui/material/Avatar";
import Select from "@mui/material/Select";

const useStyles = makeStyles({
  labelRoot: {
    marginBottom: 16,
    textAlign: "center",
    "&:hover": {
      borderRadius: 4,
      backgroundColor: "gray",
    },
  },
  stackRoot: {
    border: "1px solid gray",
    marginBottom: 16,
    "& button:hover": {
      color: "red",
    },
  },
  chipRoot: {
    marginBottom: 16,
    "&:hover .MuiAvatar-root": {
        color: "orange",
      },
    "& .MuiAvatar-root:hover": {
      color: "red",
    }
  },
  selectRoot: {
    "&:hover .MuiOutlinedInput-notchedOutline": {
        borderColor: 'red'
    }
  }
});

export default function MakeStylesHover() {
  const classes = useStyles();
  return (
    <Stack direction="column">
      <FormLabel className={classes.labelRoot}>Hover Me!</FormLabel>
      <Stack direction="column" spacing={2} className={classes.stackRoot}>
        <Button>Hover 1</Button>
        <Button>Hover 2</Button>
      </Stack>
      <Chip
        className={classes.chipRoot}
        avatar={<Avatar>M</Avatar>}
        label="Avatar Chip"
      />
      <Select className={classes.selectRoot} variant="outlined"></Select>
    </Stack>
  );
}