使用material-ui jss样式将鼠标悬停在父项上时如何更改子项的样式

使用material-ui jss样式将鼠标悬停在父项上时如何更改子项的样式

以下是正确语法的示例（

"& $addIcon"

嵌套在中

&:hover

）。

import * as React from "react";import { render } from "react-dom";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: (props: { dragActive: boolean }) => ({    height: 50,    width: 50,    color: theme.palette.grey[400],    marginBottom: theme.spacing(2)  })}));function App() {  const classes = useStyles();  return (    <Grid container>      <Grid item className={classes.outerDiv}>        <AddIcon className={classes.addIcon} />      </Grid>    </Grid>  );}const rootElement = document.getElementById("root");render(<App />, rootElement);