-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Remove inactive classes from NavLink #7194
Comments
You can just disable the Then the text colors won't be overridden by their order in the CSS file. |
@timdorr, that setting is disabled by default. I tried This has been discussed at tailwindlabs/tailwindcss#1010.
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. |
@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. |
You can use |
@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! |
It seems like we should probably change the default behavior of the |
... 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 |
I'm putting my + for going with the Would allow for finer control when using utility libraries. |
@chaance Fixing this would be a great candidate for another v5 update next week. |
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 The lovely thing with this approach is that, if you prefer an 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}
/>
);
}); |
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! 👍 |
Merged in #7983 |
Nice solution! Thanks a ton! |
Just a note that we made a tiny tweak to the API before releasing, so |
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 overridetext-gray-800
when it is added to the element. I would like the classtext-gray-800
to not be present while the link is active. Perhaps aninactiveClassName
prop. I'd be happy to start a PR with some guidance.What I've tried:
Could be:
The text was updated successfully, but these errors were encountered: