如何让Tailwindcss中的Link组件包裹整个summary元素

Question

我正在遵循 DaisyUI 文档中的 this 部分，并且我正在构建一个侧边栏，我有一个问题，我希望可折叠项目本身成为一个链接。它当然可以工作，但是链接元素并没有覆盖整个按钮。我希望链接覆盖整个按钮。看下图：

这是我的代码中的部分（红色元素中的管理员）：

import Link from 'next/link'

<details open>
  <summary className="bg-red-500">
    <Link href={href} className="bg-yellow-500">
      <div className="flex flex-row space-x-2">
        <i>{IconComponent && <IconComponent />}</i>
        <span>{t(labelKey)}</span>
      </div>
    </Link>
  </summary>
  <SidebarList items={subMenuItems} /> {/* Add a new administrator, the list bellow it */}
</details>

Answer 1

将

<summary>

包裹在

<Link>

组件内，它应该按预期工作，因为它将整个组件作为子组件。