I can't style a react-router-dom Link using Glamorous

3
votes

The standard way of applying styling to a third party component does not work for react-router-dom Links. 

export const PurchaseFooterItemLink = glamorous(Link)({...})

Styling makes NavLink 'unclickable' in react

I have the following code where all the components except Link are styled and it has to be styled.

  <PurchaseFooterListItem key={6}>
     <Link to={{pathname:'/purchase/startDate', state:{purchase: purchase }}}>
          <PurchaseFooterItemIcon src='/icons/calendar.png'></PurchaseFooterItemIcon>
          <PurchaseFooterItemText>{purchase.startDate? purchase.startDate.toLocaleDateString():''}</PurchaseFooterItemText>
      </Link>
  </PurchaseFooterListItem>

When I add the following to my style file

import {Link as ReactRouterLink} from 'react-router-dom'
export const PurchaseFooterItemLink = glamorous(ReactRouterLink)({textDecoration:'none', color: 'RGB(245,245,245)'});

and then import it and replace Link with it...

<PurchaseFooterItemLink to={{pathname:'/purchase/startDate', state:{purchase: purchase }}}>

...Typescript tells me that neither "to" nor "state" are properties that exist so it is not recognising it as a react router Link. It gives the type for PurchaseFooterItemLink as 

GlamorousComponent<object & {}, object>

I've tried the alternative syntax (https://github.com/paypal/glamorous/issues/145) of 

import withStyle from 'react'
export const PurchaseFooterItemLink = ReactRouterLink.withStyle({textDecoration:'none', color: 'RGB(245,245,245)'});

but that doesn't work either - it says withStyle is never used. So no idea what to try really.

Similar issues to third party components in general - Can't style third party components using Glamorous

Edit: the Typescript error message is:

[ts] Property 'to' does not exist on type 'IntrinsicAttributes & 
IntrinsicClassAttributes<Component<object & ExtraGlamorousProps, any, any>> 
& Readonly<{ children?: ReactNode; }> & Readonly<object & 
ExtraGlamorousProps>

When you hover over PurchaseFooterItemLink it show the type as follows, to me the issue is the type is shown as object not as Link:

const PurchaseFooterItemLink: GlamorousComponent<object & {}, object>
3
reactjsreact-routerreact-router-domstyled-componentsglamorous

3 Answers

2
votes

you may want to check this example where NavLink are styled with glamorous, but Link can be styled as well. Click works.

Just check your code corresponds to the one in the example. (check versions, etc.)

0
votes

There is a typo in your post, don't know if it also exists in your code:

<PurchaseFooterItemLink to="/purchase/startDate" state:{purchase: purchase }}}>

It should be

<PurchaseFooterItemLink to={{pathname:'/purchase/startDate', state:{purchase: purchase }}}>
0
votes

My latest edit to the question...

When you hover over PurchaseFooterItemLink it show the type as follows, to me the 
issue is the type is shown as object not as Link:

const PurchaseFooterItemLink: GlamorousComponent<object & {}, object>

...led me to the answer...which is forcing the type to be correct in the style definition...

export const PurchaseFooterItemLink: GlamorousComponent<ReactRouterLink & {}, 
ReactRouterLink> = glamorous(ReactRouterLink)({textDecoration:'none', color: 
'RGB(245,245,245)'});

Not sure why glamorous is not capable of doing that given it already has the exact type but now it is an actual Link, and Link properties can be added to it.