Disclosure.Button 的“as={NavLink}”在活动时没有样式

Question

我的 React 项目有 2 个菜单，它们都使用 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，而只会影响 Button？但我没有任何线索。

问题不在于路由器或其他任何东西，因为顶部的主菜单可以工作：

<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 CSS 人员使用，他们使用它在您单击按钮后关闭“披露”面板。

但是如果你将 Disclosure.Panel 的整个内容包裹在：

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

然后，您可以简单地在 NavLink 上添加一个 onClick 处理程序，该处理程序调用 close() 函数，然后该函数将关闭“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>