NavLink activeClassName 无法与 Tailwind CSS 一起使用

Question

我正在尝试为导航栏链接创建一个活动类，因为选择后文本不会更改。我只是想知道我哪里可能出错了。

        <NavLink
            exact
            to="/"
            activeClassName="text-white"
            className="inflex-flex items-center py-6 px-3 mr-4 text- 
            red-200 hover:text-green-800 text-4xl font-bold cursive 
            tracking-widest"
            activeClassName="text-black"
          >
            Home
          </NavLink>
          <NavLink
            to="/project"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Projects
          </NavLink>
          <NavLink
            to="/post"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >
            Blog Posts
          </NavLink>
          <NavLink
            to="/about"
            className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800"
            activeClassName="text-red-100 bg-red-700"
          >

Answer 1

尝试做

activeClassName='!text-red-100 !bg-red-700'

Answer 2

您的链接的悬停颜色可能会覆盖文本颜色。您可以尝试添加红色作为活动状态的悬停颜色：

activeClassName="text-red-100 hover:text-red-100 bg-red-700"

Answer 3

className={({ isActive }) => 活跃 ？ “text-blue-700 字体粗体下划线”：“” }