按钮的"as={NavLink}“在活动时不具有样式

Question

我在一个反应项目上有两个菜单，它们都使用NavLink来显示它是否是活动的。

普通的是工作的，但是移动的是用HeadlessUI Disclosure.Button.

所以我有：

<Disclosure.Button
  as={NavLink}
  to='/'
  className={({ isActive }) => isActive
    ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
    : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
  }
>
  My Events
</Disclosure.Button>

其中的isActive布尔值不起作用。

我假设我使用的className不影响NavLink，而只影响按钮？但我一点也不知道。

问题不在于路由器或其他任何东西，因为主要的manu顶级工作：

<NavLink
  to="/"
  className={({ isActive }) => isActive
    ? "border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
    : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
  }
>
  My Events
</NavLink>

Answer 1

我把整个Disclosure.Button的东西扔出窗外，解决了这个问题。

我想要使用它的唯一原因，是因为它是由Tailwind人员使用的，在单击按钮后，他们使用它来关闭“披露”面板。

但是，如果您将Disclosure.Panel的整个内部封装在：

{({ close }) => (
    ***Your code here***
)}

然后，您可以简单地在调用close()函数的NavLink上添加一个NavLink处理程序，然后这个函数将关闭Disclosure .即：

<NavLink
            to='/'
            className={({ isActive }) =>
              isActive ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6" : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
            }
            onClick={() => close()}
            >
            My Events
</NavLink>