How to change color of link and icon when isActive?

Issue

I have icon inside Link tag in my React component. I would like when Link is active to change the color of icon also. According to the code written below, when the link is active, the color of the icon also changes. But when I set the color of the icon in its css, the color of the icon no longer changes when the link is active. How would I change that?

 const prop = ({ path, icon, isActive }) => (
 <Link to={path} className={`nav-link ${isActive ? "active-link" : ""}`}>
   <i className={`${icon} customIcon `}></i>
   <span>{text}</span>
 </Link>
 )

This is css code:

.nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;

  color: #52575c;
}

.customIcon {
  width: 18px;
  padding-right: 10px;
  padding-left: 6px;
 /* color: #52575c; */
}

.active-link {
  color: #336cfb;
}

Solution

In the Icon className ${icon} is applying the color, adding a new line for customIcon classname with the active-link class prefix should work.

.nav-link {
  ....
}

.customIcon {
  ...
}

.active-link,
.active-link .customIcon {
  color: #336cfb;
}

Keep the current className order ${icon} customIcon

Answered By - MikeSouto