Dynamically styling `<NavLink>` does not work when used together with Radix.Tooltip

[hollandThomas]

What version of Remix are you using?

1.13

Steps to Reproduce

Bugged version

Given the following code, featuring Radix's \<Tooltip>

import { NavLink } from 'remix';
import * as Tooltip from '@radix-ui/react-tooltip';

type ListItemProps = { to: string; src: string; tooltip: string };
const ListItem: React.FC<ListItemProps> = ({ to, src, tooltip }) => (
  <li>
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <NavLink
          to={to}
          className={({ isActive }) =>
            'block rounded-md p-4 transition-colors hover:bg-gray-100 ' +
            (isActive && 'bg-gray-100')
          }
        >
          <img src={src} className="h-6 w-6 text-gray-100" />
        </NavLink>
      </Tooltip.Trigger>
      <Tooltip.Content
        side="right"
        className="rounded-md bg-white px-4 py-2 shadow-lg"
      >
        <Tooltip.Arrow className=" fill-white" />
        {tooltip}
      </Tooltip.Content>
    </Tooltip.Root>
  </li>
);

Expected Behavior

I would expect it to work as is. It should apply the correct classNames to <NavLink>.

Actual Behavior

It renders this HTML, e.g. it does not evaluate the expression given for className and instead renders it verbatim:

<li>
  <a
    data-state="closed"
    aria-current="page"
    class="({ isActive }) => "block rounded-md p-4 transition-colors hover:bg-gray-100 &quot; + (isActive && "bg-gray-100") active" href="/some/path"
>
  <img src="/path/to/icon.svg" class="h-6 w-6 text-gray-100">
</a>

Bug-free version

For reference, this code works as expected:

type ListItemProps = { to: string; src: string; tooltip: string };
const ListItem: React.FC<ListItemProps> = ({ to, src, tooltip }) => (
  <li>
    <NavLink
      to={to}
      className={({ isActive }) =>
        'block rounded-md p-4 transition-colors hover:bg-gray-100 ' +
        (isActive && 'bg-gray-100')
      }
    >
      <img src={src} className="h-6 w-6 text-gray-100" />
    </NavLink>
  </li>
);

Reproducible example

CodeSandbo

I'm not sure if this is a Radix or a Remix bug. That's why I cross-posted an issue over there. Feel free to close this if this is not related to Remix.

[hollandThomas]

It's a Radix "bug" because passing a Function to className seems to be non-standard, which is why Radix currently does not consider this possibility.

See this issue for further details.