使用 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>

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

Answer 2

NavLink

组件具有

activeClassName

属性。

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

Answer 3

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

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

Answer 4

你可以使用

使用：.active

当 .active 类与当前 URL 路径匹配时，将自动应用于 NavLink 组件。

示例

.active {
      @apply text-red-600 ....
 }