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