CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Rob Terrell
Rob Terrell

Reputation: 2562

Target multiple classes at once Material UI

I am currently using material ui and I would like to change the color of my icon class when the active class is triggered by react-router-dom's NavLink

my code is as follows:

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;

I would like the icon color to be white when the active class is triggered but I cannot seem to target the icon class within the active class.

Please Note: I understand my react router logic is set up incorrectly this is just to allow the active class to be triggered within my code sandbox. Thanks!

attached is a code sandbox for debuggging: https://codesandbox.io/s/vigilant-curran-iwdtq?file=/src/App.js:0-2628

Upvotes: 2

Views: 1976

Answers (1)

David I. Samudio
David I. Samudio

Reputation: 2693

Try to reference your icon style within your active style:

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

See it live: https://codesandbox.io/s/so-answer-cute1?file=/src/App.js

I put the activeClassname behavior on hover to show it working, as you did before.

Upvotes: 1

Related Questions