如何在 isActive 时更改 link 和图标的颜色？

Question

我的 React 组件中的 Link 标签内有 icon。我想在 Link 处于活动状态时 也更改图标的颜色 。根据下面编写的代码，当 link 处于活动状态时，图标的颜色也会发生变化。但是当我在它的 css 中设置图标的颜色时，当 link 处于活动状态时，图标的颜色不再改变。我该如何改变它？

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

这是css代码：

.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;
}

Answer 1

有多种方法可以解决此问题，我尝试的一种方法是将图标的颜色嵌套在 nav-link 下方，如下所示：

.nav-link.active-link {
 color: #000; /* color when the nav-link is active */
}
.nav-link.active-link i {
 color: #000; /* color of the icon when the parent nav-link is active */
}

最坏的情况，如果你想不出另一种方法来做到这一点，你可以使用 !important 运算符覆盖 CSS 特异性，如下所示：

color: #000 !important; /* value that should really be set */

Answer 2

你可以用 class 作为你的颜色，然后像这样使用它

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

CSS

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

在 .nav-link class

上删除颜色属性

您可以使用 NavLink 而不是 link，它为您提供了 className 属性的回调函数，您可以访问 link 的 activity，例如这个

       <NavLink
       to="/"
       className={(link) => (link.isActive ? "active-nav-link" : "")
       }
       link
       </NavLink>

Answer 3

在 Icon className ${icon} 中应用颜色，为 customIcon classname 添加一个带有 active-link class 前缀的新行应该可以工作.

.nav-link {
  ....
}

.customIcon {
  ...
}

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

保持当前的class姓名顺序${icon} customIcon

如何在 isActive 时更改 link 和图标的颜色？

How to change color of link and icon when isActive?

html

css

reactjs

colors

icons