You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The css classes it ends up with in the browser are: inline-block rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300 active inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 dark:border-blue-500 dark:text-blue-500
The intention is for the border to be blue for the active page, but it actually ends up being transparent. It has both the border-transparent and border-blue-600 classes, but for some reason border-transparent wins here. Probably because of the order they're defined in the TW sources (but I didn't check, so not 100% sure).
Motivation
Developers should have full control over what classes gets applied to the link
Detailed proposal
The simplest way to give the developer full control here is to not try to merge the classes, but rather just use classNameORactiveClassName, not both. Yes, more repetition is needed, but it does provide more control over the styling.
Another option is to provide a prop to control the behavior. But I think that adds extra complexity that I don't want.
Are you interested in working on this?
I'm interested in working on this
The text was updated successfully, but these errors were encountered:
This is the behavior that we have in the form helpers (className and errorClassName are NOT merged and one replaces the other). I would have thought we’d do the same thing here but I guess not!
I agree, although you may have to repeat some classes, it’s the only way to be sure you have full control over the styles in both active and in-active states.
Summary
<NavLink>
currently does a very naive merging ofclassName
andactiveClassName
on the active page.Given this
<NavLink>
The css classes it ends up with in the browser are:
inline-block rounded-t-lg border-b-2 border-transparent p-4 hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300 active inline-block rounded-t-lg border-b-2 border-blue-600 p-4 text-blue-600 dark:border-blue-500 dark:text-blue-500
The intention is for the border to be blue for the active page, but it actually ends up being transparent. It has both the
border-transparent
andborder-blue-600
classes, but for some reasonborder-transparent
wins here. Probably because of the order they're defined in the TW sources (but I didn't check, so not 100% sure).Motivation
Developers should have full control over what classes gets applied to the link
Detailed proposal
The simplest way to give the developer full control here is to not try to merge the classes, but rather just use
className
ORactiveClassName
, not both. Yes, more repetition is needed, but it does provide more control over the styling.Another option is to provide a prop to control the behavior. But I think that adds extra complexity that I don't want.
Are you interested in working on this?
The text was updated successfully, but these errors were encountered: