How to change a style of a child when hovering over a parent using React Material UI styles?

Sometimes, we want to change a style of a child when hovering over a parent using React Material UI styles.

In this article, we’ll look at how to change a style of a child when hovering over a parent using React Material UI styles.

How to change a style of a child when hovering over a parent using React Material UI styles?

To change a style of a child when hovering over a parent using React Material UI styles, we can call makeStyles with the &:hover selector of the parent element to change the styles when we hover over the child element.

For instance, we write:

import * as React from "react";
import { Grid, makeStyles } from "@material-ui/core";
import AddIcon from "@material-ui/icons/Add";

const useStyles = makeStyles((theme) => ({
  outerDiv: {
    backgroundColor: theme.palette.grey[200],
    padding: theme.spacing(4),
    "&:hover": {
      cursor: "pointer",
      backgroundColor: theme.palette.grey[100],
      "& $addIcon": {
        color: "purple"
      }
    }
  },
  addIcon: () => ({
    height: 50,
    width: 50,
    color: theme.palette.grey[400],
    marginBottom: theme.spacing(2)
  })
}));

export default function App() {
  const classes = useStyles();

  return (
    <Grid container>
      <Grid item className={classes.outerDiv}>
        <AddIcon className={classes.addIcon} />
      </Grid>
    </Grid>
  );
}

We call makeStyles with a function that has the outerDiv class property with the "&:hover" property inside it.

We set "&:hover" to a function that changes the background color of the child element.

Also, we have the "& $addIcon" property to set the color of the child element.

Next, we apply the outerDiv class by setting the className prop of Grid to classes.outerDiv.

As a result, when we hover over the Grid, we see that the add icon is purple.

How to change a style of a child when hovering over a parent using React Material UI styles?

Conclusion