<DropdownMenu>
<DropdownMenuItem asChild>
// anything here will result in an exception
</DropdownMenuItem>
</DropdownMenu>
<DropdownMenuPrimitives.Item
ref={forwardedRef}
className={cx(
// base
"group/DropdownMenuItem relative flex cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-1 outline-none transition-colors data-[state=checked]:font-semibold sm:text-sm",
// text color
"text-gray-900 dark:text-gray-50",
// disabled
"data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
// focus
"focus-visible:bg-gray-100 focus-visible:dark:bg-gray-900",
// hover
"hover:bg-gray-100 hover:dark:bg-gray-900",
className,
)}
{...props}
>
<> <--------- new
{children}
{hint && (
<span
className={cx("ml-auto pl-2 text-sm text-gray-400 dark:text-gray-600")}
>
{hint}
</span>
)}
{shortcut && (
<span
className={cx("ml-auto pl-2 text-sm text-gray-400 dark:text-gray-600")}
>
{shortcut}
</span>
)}
</> <--------- new
</DropdownMenuPrimitives.Item>
Honestly, I expected that asChild would use the whole component as input while retaining style, but it just ignores the parent style. But this might be my misunderstanding on how this works.
I wanted to put next.js <Link>
inside the <DropdownMenuItem>
while retaining style, but this proved more difficult than expected