使用顺风css时，NavLink颜色未发生变化

yftpprvb 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(132)

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

活动的导航链接颜色应该改变，但它没有改变。"text-oirOrange"类被添加到html中，但它没有影响。
“oirOrange”是我已经声明的颜色。

css

来源：https://stackoverflow.com/questions/75631318/navlink-color-is-not-changing-using-tailwind-css

1条答案

按热度按时间

y4ekin9u1#

如果我没理解错的话，你想把这个"text-oiOrange"类添加到列表项（* li *）元素中，例如实际显示的文本。你可以使用children render函数来把当前样式应用到li元素中，而不是NavLink正在渲染的锚标记中。
示例：

<NavLink to={item.link} key={index}>
  {({ isActive }) => (
    <li
      className={[
        "cursor-pointer font-semibold hover:text-oirOrange",
        isActive ? "text-oirOrange" : "text-oirBrown"
      ].join(" ")}
    >
      {item.text}
    </li>

  )}
</NavLink>

赞(0）回复(0）举报 2023-03-05

我来回答

使用顺风css时，NavLink颜色未发生变化

1条答案

相关问题

热门标签

最新问答