Add inactiveClassName to NavLink (feature request)

[JofArnold]

When using a global/functional CSS strategy like Tachyons is it critical we do not rely on selector specificity and className order. At present, however, to style active and inactive NavLinks we do this:

<NavLink className="f5 black" activeClassName="red" />

Which renders as

<a class="f5 black" /> // <-- inactive
<a class="f5 black red" /> // <-- active

This happens to work because .red is after .black in the Tachyons style sheet. But if I'd chosen .navy instead of .black - which happens to be after .red - then the active style does nothing.

As you can see this is inherently brittle and furthermore browsers are not required by the W3C spec to honour class order. You can get around this by creating custom css classes and invoking !important or increased specificity but this breaks a core principle of functional css.

Preferred would be:

<NavLink className="f5" activeClassName="red" inactiveClassName="black" />

Which would render as

<a class="f5 black" /> // <-- inactive
<a class="f5 red" /> // <-- active

giving you the results you'd expect.

Side note: from a general point of view, I've found that adding classes - as opposed to switching them - generally isn't scalable in a wide variety of cases not just Tachyons.

[timdorr]

I don't think we're going to add this. You can just define the "inactive" styles on the base class and override them in the active class.

[JofArnold]

Which I'm saying an anti-pattern. Additive class names is a code smell - especially in React - and relying on style sheet order is fragile and not something the developer always has control over.

It doesn't matter what you name them

.defaultStyles {
  color: black;
}

.activeStyles {
  color: red;
}

it still relies on style sheet selector order or specificity. If you cannot control the selector order in the style sheet (e.g. you're using Tachyons or Bootstrap from a CDN) then you're out of luck. To get around this if you're using scss versions of those stylesheets you control the order whilst still referring to the canonical styles by using @extend

.inactive {
  @extend .black;
}

.active {
  @extend .red;
}

but that's all you can do.

Can you please clarify your use of "just" with an example that doesn't require modifying Bootstrap or Tachyons.

[sanderfish]

I'm with @JofArnold here and would like to ask you to reconsider. Especially with utility frameworks like Tachyons and Tailwind CSS, the goal is to not write styles.

It's not possible to always make sure that class X comes after class Y in style sheets, so you can't overwrite those classes in the activeClassName property.

[JofArnold]

If they don't make the mod, making your own component involves changing a couple of lines. Here's roughly [1] what I use https://gist.github.com/JofArnold/21d8176377ef5a7d55a7b9221b852e63 Also enhanced to take a child function so you can do stuff like this:

<NavLink {...someProps}>
  {({ isActive }) =>
    isActive ? <span>Active :)</span> : <span>Inactive :(</span>}
</NavLink>;

[1] I say "roughly" in the sense I edited the code directly in the gist without testing so apologies if it doesn't work

[sanderfish]

@JofArnold I'll see if another response comes in as I don't need a final solution yet, but your solution looks great. Thanks so much for supplying code and all!