activeProps Paintpoint for classname priority

So i'm setting up navigation and noticed i'm running into a painpoint with the

activeProps

activeProps

concept and class name order. for example, if i have something like this:

<Link
  to={item.href}
  className={cn(
    "text-secondary-foreground hover:text-primary hover:bg-gray-50",
    "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
  )}
  activeProps={{
    className: "bg-card text-primary",
  }}
>
  <item.icon
    className={cn("h-6 w-6 shrink-0")}
    aria-hidden="true"
  />
  {item.name}
</Link>

<Link
  to={item.href}
  className={cn(
    "text-secondary-foreground hover:text-primary hover:bg-gray-50",
    "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
  )}
  activeProps={{
    className: "bg-card text-primary",
  }}
>
  <item.icon
    className={cn("h-6 w-6 shrink-0")}
    aria-hidden="true"
  />
  {item.name}
</Link>

text-primary

text-primary

will get added but will not take priority because

text-secondary-foreground

text-secondary-foreground

beats it out because i can't include it in my

cn()

cn()

on my regular classname.

i have a couple ideas here, but not ideal to have to come up with a workaround here. anyone else run into something like this before?

TanStack•3y ago•

14 replies

ill-bronze

activeProps Paintpoint for classname priority

So i'm setting up navigation and noticed i'm running into a painpoint with the

activeProps

activeProps

concept and class name order. for example, if i have something like this:

<Link
  to={item.href}
  className={cn(
    "text-secondary-foreground hover:text-primary hover:bg-gray-50",
    "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
  )}
  activeProps={{
    className: "bg-card text-primary",
  }}
>
  <item.icon
    className={cn("h-6 w-6 shrink-0")}
    aria-hidden="true"
  />
  {item.name}
</Link>

<Link
  to={item.href}
  className={cn(
    "text-secondary-foreground hover:text-primary hover:bg-gray-50",
    "group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold"
  )}
  activeProps={{
    className: "bg-card text-primary",
  }}
>
  <item.icon
    className={cn("h-6 w-6 shrink-0")}
    aria-hidden="true"
  />
  {item.name}
</Link>

text-primary

text-primary

will get added but will not take priority because

text-secondary-foreground

text-secondary-foreground

beats it out because i can't include it in my

cn()

cn()

on my regular classname.

i have a couple ideas here, but not ideal to have to come up with a workaround here. anyone else run into something like this before?

activeProps Paintpoint for classname priority

Similar Threads

activeProps Paintpoint for classname priority

Similar Threads

Similar Threads

Similar Threads