Я не могу стилизовать React-Router-Dom Link с использованием Glamorous

Question

Стандартный способ применения стилевого оформления к стороннему компоненту не работает для Links-router-dom Links.

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

Стилизация делает NavLink «не щелкающим» при реагировании

У меня есть следующий код, где все компоненты, кроме Link, стилизованы, и он должен быть стилизован.

  <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>

Когда я добавляю следующее в мой файл стиля

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

, а затем импортируйте его и замените ссылку на него ...

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

... Typescript говорит мне, что ни "to", ни "state" не являются существующими свойствами, поэтому он не распознает его как реакционную ссылку маршрутизатора. Это дает тип для PurchaseFooterItemLink как

GlamorousComponent<object & {}, object> 

Я пробовал альтернативный синтаксис (https://github.com/paypal/glamorous/issues/145) из

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

но это тоже не работает - он говорит, что withStyle никогда не используется. Так что понятия не имею, что попробовать на самом деле.

Подобные проблемы со сторонними компонентами в целом - Невозможно стилизовать сторонние компоненты с помощью Glamorous

Редактировать: сообщение об ошибке Typescript:

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

Когда вы наводите курсор на PurchaseFooterItemLink, он показывает тип следующим образом, для меня проблема в том, что тип отображается как объект, а не как ссылка:

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

Answer 1

В вашем сообщении есть опечатка, не знаю, существует ли она и в вашем коде:

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

должно быть

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

Answer 2

Мое последнее изменение вопроса ...

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>

... привело меня к ответу ... который заставляет тип быть правильным в определении стиля ...

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

Не уверен, почему glamorous не способен сделать это, поскольку у него уже есть точный тип, но теперь это фактическая ссылка, и к ней можно добавить свойства ссылки.

Answer 3

Вы можете захотеть проверить в этом примере , где NavLink стилизован в стиле гламур, но Link также может быть стилизован. Клик работает.

Просто убедитесь, что ваш код соответствует коду в примере. (проверьте версии и т. д.)