css - 如何将活动类添加到包装在 Navlink 中的 img 标签？

Question

所以下面的代码工作正常。当仪表板处于活动状态时，它将显示活动类，但是当仪表板处于活动状态时，如何使 img 标签处于活动状态并更改其颜色？

    <div className="links-nav">
        <NavLink className="item" activeClassName="active" to="/dashboard">
              <img
                src="/images/svgs/dashboard.svg"
                className="home"
                alt="home"
              />
              <span
                className="nav-content"
                onClick={(event) => this.navLinks(event)}
              >
                Dashboard
              </span>
            </NavLink>
       </div>   
        
   .links-nav .active {
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      color: #000000;
    }
.link-nav .home .active {
  background :#0000FF

.home .active 不起作用我是 CSS 新手并做出反应。有人可以帮我查询吗？

标签： cssreactjs

Answer 1

如果我理解正确，您想更新图像的背景 ( .home)。如果它们的祖先与第一个选择器匹配，则使用后代组合器选择器 ( ) 将匹配第二个选择器。您的选择器已经交换了“home”和“active”类名。

.links-nav .active .home {
  background: #0000ff;
}