Javascript 一次以多个类为目标材质UI

我目前正在使用material ui，我想在react router dom的NavLink触发活动类时更改图标类的颜色

我的代码如下：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import PeopleIcon from "@material-ui/icons/People";
import AssignmentOutlinedIcon from "@material-ui/icons/AssignmentOutlined";
import TransferWithinAStationOutlinedIcon from "@material-ui/icons/TransferWithinAStationOutlined";
import ScheduleIcon from "@material-ui/icons/Schedule";
import { NavLink } from "react-router-dom";
import { BrowserRouter as Router } from "react-router-dom";

const drawerWidth = 220;

const useStyles = makeStyles((theme) => ({
  paper: {
    width: drawerWidth,
    borderBottomLeftRadius: 10,
    borderTopLeftRadius: 10,
    height: "calc(100% - 10px)",
    border: "solid 1px #CCCCCC",
    paddingTop: 5
  },
  icon: {
    width: 20,
    height: 20,
    color: "#999999"
  },
  listItem: {
    textDecoration: "none",
    color: "inherit",
    padding: 5,
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "#EEEEEE"
    }
  },
  active: {
    backgroundColor: "#999999",
    color: "white",
    "&:hover": {
      backgroundColor: "#999999"
    }
  }
}));

const App = () => {
  const classes = useStyles();

  const routes = [
    {
      path: "/admin/users",
      name: "Users",
      icon: <PeopleIcon className={classes.icon} />
    },
    {
      path: "/admin/assignments",
      name: "Assignments",
      icon: <AssignmentOutlinedIcon className={classes.icon} />
    },
    {
      path: "/admin/transfers",
      name: "Transfers",
      icon: <TransferWithinAStationOutlinedIcon className={classes.icon} />
    },
    {
      path: "/admin/liveClock",
      name: "Live Clock",
      icon: <ScheduleIcon className={classes.icon} />
    }
  ];

  return (
    <>
      <Paper variant="outlined" square className={classes.paper}>
        {routes.map((r, i) => {
          return (
            <Router>
              <NavLink
                activeClassName={classes.active}
                to={r.path}
                key={i}
                style={{
                  display: "flex",
                  alignItems: "center",
                  paddingLeft: 10
                }}
                className={classes.listItem}
              >
                {r.icon}
                <Typography
                  variant="body1"
                  style={{ marginLeft: 10, fontSize: "15px" }}
                >
                  {r.name}
                </Typography>
              </NavLink>
            </Router>
          );
        })}
      </Paper>
    </>
  );
};

export default App;

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“@material ui/icons/People”导入人物图标；
从“@material ui/icons/AssignmentOutlinedIcon”导入AssignmentOutlinedIcon；
从“@material ui/icons/transferWithInStationOutlined”导入TransferWithInStationOutlineDicon；
从“@material ui/icons/Schedule”导入ScheduleIcon；
从“react router dom”导入{NavLink}；
从“react Router dom”导入{BrowserRouter as Router}；
常数抽屉宽度=220；
const useStyles=makeStyles（（主题）=>({
论文：{
宽度：抽屉宽度，
边界半径：10，
borderTopLeftRadius:10，
高度：“计算（100%-10px）”，
边框：“实心1px#中交”，
加油站：5
},
图标：{
宽度：20，
身高：20，
颜色：“999999”
},
列表项：{
文本装饰：“无”，
颜色：“继承”，
填充：5，
光标：“指针”，
“&：悬停”：{
背景色：“EEEEEE”
}
},
活动：{
背景颜色：“999999”，
颜色：“白色”，
“&：悬停”：{
背景颜色：“999999”
}
}
}));
常量应用=（）=>{
const classes=useStyles（）；
常数路由=[
{
路径：“/admin/users”，
名称：“用户”，
偶像：
},
{
路径：“/admin/assignments”，
名称：“任务”，
图标：
尝试在您的
活动
样式中引用您的
图标
样式：

活动：{。。。
“&$icon”：{颜色：'#EEEEEE'}

现场观看：

我将
activeClassname
行为置于悬停状态，以显示它的工作状态，就像您之前所做的那样。
非常感谢！这正是我要找的。非常欢迎您，罗伯特。