Remove inactive classes from NavLink

[tim-phillips]

Using the NavLink component, I'd like to remove classes that should not be on an active link.

I'm using Tailwind and text-gray-200 does not override text-gray-800 when it is added to the element. I would like the class text-gray-800 to not be present while the link is active. Perhaps an inactiveClassName prop. I'd be happy to start a PR with some guidance.

What I've tried:

<NavLink
  to="/"
  className="px-3 py-2 text-gray-800"
  activeClassName="rounded-sm text-gray-200 bg-blue-gray-dark"
>
  Dashboard
</NavLink>

Could be:

<NavLink
  to="/"
  className="px-3 py-2"
  inactiveClassName="text-gray-800"
  activeClassName="rounded-sm text-gray-200 bg-blue-gray-dark"
>
  Dashboard
</NavLink>

[timdorr]

You can just disable the !important declarations: https://tailwindcss.com/docs/configuration/#important

Then the text colors won't be overridden by their order in the CSS file.

[tim-phillips]

@timdorr, that setting is disabled by default. I tried false, true, and '#root' with no effect.

This has been discussed at tailwindlabs/tailwindcss#1010.

If you are trying to dynamically toggle between p-0 and p-4 you should always swap them out, toggle both, you shouldn't rely on css source order.

---

After doing some research, the class order defined on an HTML element has no effect, what matters is specificity. Since these two classes have the same specificity, the one that comes later in the stylesheet takes precedence.

https://stackoverflow.com/questions/12258596/class-overrule-when-two-classes-assigned-to-one-div/12258654

[garand]

@timdorr Is this something you'd be willing to reconsider? I totally get adding extra bloat that doesn't make sense, but as I've been using tools like Tailwind CSS more recently as well it can become necessary to remove classes in "inactive" situations.

[timdorr]

You can use @apply to create custom component classes from your Tailwind classes that better match the behaviors here.

[garand]

@timdorr Yeah, I end up doing that usually but IMO it would be cleaner to only be applying the classes used on an element.

Appreciate the quick response!

[mjackson]

It seems like we should probably change the default behavior of the activeClassName (and activeStyle) props to be exclusive instead of additive. That way you can be very explicit about what you want in both states. You may have to duplicate your "base" classnames and/or styles between the your normal and "active" props, but that would take care of this without introducing the need for another prop.

[mjackson]

... Then again, changing the behavior of the existing props would be a breaking change in v5. I think we should probably just go ahead and add an inactiveClassName prop as @tim-phillips originally suggested. We should probably also include a inactiveStyle prop for parity.

[bdbch]

I'm putting my + for going with the inactiveClassName option here. If we already have className and activeClassName - why not be super descriptive by also allowing the negative state of active (so inactive).

Would allow for finer control when using utility libraries.

[mjackson]

@chaance Fixing this would be a great candidate for another v5 update next week.

[chaance]

Just keeping everyone here in the loop, where I think we've landed is addressed in #7983. This solution is a bit lower level than simply adding inactiveClassName or inactiveStyle props, but it's a stronger base in v6 to handle either active or inactive styles with a single prop instead of splitting className or style into three separate props for each case.

The lovely thing with this approach is that, if you prefer an inactiveClassName prop, it's quite simple to create your own abstraction and use whatever API you'd prefer:

import { NavLink as BaseNavLink } from "react-router-dom";
import cx from "classnames"; // this can be whatever tool you want, obviously!

const NavLink = React.forwardRef(({ inactiveClassName, ...props }, ref) => {
  return (
    <BaseNavLink
      ref={ref}
      {...props}
      className={({ isActive }) => !isActive ? cx(props.className, inactiveClassName) : props.className}
    />
  );
});

[timdorr]

Actually, a slightly more elegant way of doing it:

import { NavLink as BaseNavLink } from "react-router-dom";
import cx from "classnames"; // this can be whatever tool you want, obviously!

const NavLink = React.forwardRef(({ activeClassName, inactiveClassName, className, ...props }, ref) => {
  return (
    <BaseNavLink
      ref={ref}
      {...props}
      className={({ isActive }) => cx({ activeClassName: isActive, inactiveClassName: !isActive }, className)}
    />
  );
});

I like it! 👍

[chaance]

Merged in #7983

[tim-phillips]

Nice solution! Thanks a ton!

[chaance]

Just a note that we made a tiny tweak to the API before releasing, so isActive is a named object property in the function instead of the parameter itself. Just released in v6.0.0-beta.3!