我已經使用react-router-dom和NavLink創建了所有的導航鏈接。

我想在活動狀態下賦予購物車圖標不同于其他導航項目(如主頁、聯系人、關于等)的樣式。我試圖通過給它的NavLink一個不同的類名來使購物車的活動狀態不同。但是那沒有用。它采用與其他導航元素相同的樣式。

<nav >
        <li><NavLink activeClassName='active' exact to={'/'}>Home</NavLink> </li>
        <li><NavLink activeClassName='active' to={'about'}>About</NavLink> </li>
        <li><NavLink activeClassName='active' to={'contacts'}>Contact</NavLink> </li>
        <li><NavLink activeClassName='active' to={'products'}>Products</NavLink> </li>
        <li><NavLink activeClassName='active_cart' to={'cart'}><FaCartPlus /></NavLink></li>
    </nav>

沒有看到你的CSS/HTML，不好說。這可能是一個CSS特異性問題。

也就是說，我建議使用HTML屬性[aria-current = & quot；頁面& quot]它是特別設計的，用來表明你當前正在一個頁面上:

[role="menuitem"] {
  display: inline-block;
  color: teal;
  text-decoration: none;
  padding: 0.25rem 1rem;
}

[role="menuitem"][aria-current="page"] {
  color: magenta;
}

<nav>
  <div role="menubar" aria-label="Main menu">
    <a href="#" role="menuitem">Link 1</a>
    <a href="#" role="menuitem">Link 2</a>
    <a href="#" role="menuitem">Link 3</a>
    <a href="#" role="menuitem">Link 4</a>
    <a href="#" role="menuitem" aria-current="page">Cart</a>
  </div>
</nav>