From 830382e10ac4c43a60847f062c5708e1a1fd6a22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Rialland?= Date: Thu, 28 Jul 2022 20:06:53 +0200 Subject: [PATCH] Add comment for NavLink hack --- site/source/design-system/typography/link.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/site/source/design-system/typography/link.tsx b/site/source/design-system/typography/link.tsx index 77fb36b8b..b6cdd7b8b 100644 --- a/site/source/design-system/typography/link.tsx +++ b/site/source/design-system/typography/link.tsx @@ -111,6 +111,12 @@ export function useExternalLinkProps({ } } +/** + * This component resolve a conflict beetween styled-component and NavLink, + * styled-component overwrite the functions in style or className props so we can't use NavLink isActive. + * To get around that we rename style/className props in useButtonOrLink if + * they are functions and we pass them to NavLink here + */ const CustomNavLink = React.forwardRef(function CustomNavLink( props: ComponentProps & { _style?: ComponentProps['style'] @@ -191,13 +197,13 @@ export function useButtonOrLink( ) ) - // resolve conflict between styled-component and NavLink style props + // Rename style if it is a function, see CustomNavLink const styleProps = 'to' in props && typeof props.style === 'function' ? { _style: props.style, style: undefined } : {} - // resolve conflict between styled-component and NavLink classname props + // Rename classname if it is a function, see CustomNavLink const classNameProps = 'to' in props && typeof props.className === 'function' ? { _className: props.className, className: undefined }