如何在JS中将JS中的CSS用于嵌套悬停样式，材质UI

正确的语法是

"&:hover > div:hover": { ... }

这是一个演示语法的工作示例：

import React from "react";import ReactDOM from "react-dom";import { makeStyles } from "@material-ui/core/styles";const useStyles = makeStyles({  navlink: {    border: "1px solid green",    fontSize: "16pt",    "&:hover": {      backgroundColor: "lightgreen"    },    "&:hover > div:hover": {      backgroundColor: "lightblue"    }  }});function App() {  const classes = useStyles();  return (    <div className="App">      <div className={classes.navlink}>        Hello <div>CodeSandbox</div>      </div>    </div>  );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);

它还可以深深地嵌套以下语法：

const useStyles = makeStyles({  navlink: {    border: "1px solid green",    fontSize: "16pt",    "&:hover": {      backgroundColor: "lightgreen",      "& > div:hover": {        backgroundColor: "lightblue"      }    }  }});

这是相关的JSS文档：https
://cssinjs.org/jss-plugin-nested/ ?v= v10.0.0-alpha.24