使用Tailwind CSS时NavLink激活态颜色不生效问题求助

你的问题核心是CSS优先级导致父元素的激活态样式被子元素覆盖：

• NavLink（父元素，通常是<a>标签）上的text-oirOrange类，颜色样式无法传递给已经设置了text-oirBrown的子元素<li>——因为<li>自身的color样式优先级更高，直接覆盖了父元素的继承样式。

两种可行的修复方案 #

方案1：将激活态类直接绑定到<li>元素（推荐） #

把判断isActive的逻辑移到<li>的className里，让激活态样式直接作用在目标元素上，确保优先级足够：

<NavLink
  to={item.link}
  key={index}
>
  <li className={({ isActive }) => 
    `cursor-pointer font-semibold ${isActive ? 'text-oirOrange' : 'text-oirBrown'} hover:text-oirOrange`
  }>
    {item.text}
  </li>
</NavLink>

方案2：提高父元素样式的优先级 #

如果不想改动组件结构，可以在全局样式中添加后代选择器，强制让激活态的NavLink下的li继承颜色：

.text-oirOrange li {
  color: var(--oirOrange); /* 替换成你实际声明oirOrange颜色的方式 */
}

内容的提问来源于stack exchange，提问作者Rohit Nandagawali