一次定位多个类 Material UI

Question

我目前正在使用材质 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;

我希望在活动类被触发时图标颜色为白色，但我似乎无法在活动类中定位图标类。

请注意： 我了解我的反应路由器逻辑设置不正确，这只是为了允许在我的代码沙箱中触发活动类。谢谢！

附件是一个用于调试的代码沙箱： https://codesandbox.io/s/vigilant-curran-iwdtq?file=/src/App.js:0-2628

Answer 1

尝试在您的active 样式中引用您的icon 样式：

active: { ...
'& $icon':{ color: '#EEEEEE'}

现场观看：https://codesandbox.io/s/so-answer-cute1?file=/src/App.js

我将activeClassname 行为置于悬停状态以显示其正常工作，就像您之前所做的那样。