使用Tailwind CSS为Navlink添加样式

Question

我正在尝试将tailwind-css添加到Navlink（react-router-dom）中。我想要添加活动样式。为了添加活动样式，可以使用以下代码：

<NavLink to="/faq" activeStyle={{fontWeight: "bold",color: "red"}}>
  FAQs
</NavLink>

有没有一种使用tailwind-css的方法来实现这一点，我不想使用css，也许像这样做？

<NavLink to="/faq" className={`${active?'font-bold text-red':'text-gray-900'}...`}>
  FAQs
</NavLink>

- Geevi Hegde

Answer 1

React Router的V6版本不再具有activeClassName属性。以下是如何使用ReactRouter和Remix的新版本来使用Tailwind样式化NavLink。

 <NavLink
    to="tasks"
     className={({ isActive }) =>
         isActive ? activeClassName : undefined
        }
     >
     Tasks
  </NavLink>

从这里取得 https://remix.run/docs/en/v1/api/remix#navlink

- Tedis Agolli

---

为什么需要使用Remix，我不明白呢？ - Steven Aguilar

@StevenAguilar Remix不是必需的，只是代码片段来自Remix的文档。对于React来说也是一样的。 - stuckoverflow

Answer 2

NavLink组件具有activeClassName属性。

https://reactrouter.com/web/api/NavLink

- Mikhail Grechka

---

ReactRouter的v6不再具备这个功能 :( - rmcsharry

Answer 3

最近我一直在使用NavLink创建当前页面时的aria属性:

<NavLink
  className="text-white aria-[current=page]:text-blue-400"
  to="/"
>
  Home
</NavLink>

- Davyd Souza

---

目前你的回答写得不清楚。请[编辑]以添加更多细节，帮助其他人理解如何回答问题。您可以在帮助中心中找到有关编写良好回答的更多信息。 - Community