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

Стандартный способ применения стилей к сторонним компонентам не работает для 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>
Источник

3 ответа

Решение

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

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 не способен сделать это, поскольку у него уже есть точный тип, но теперь это фактическая ссылка, и к ней можно добавить свойства ссылки.

Источник

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

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

Источник

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

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

Так должно быть

<PurchaseFooterItemLink to={{pathname:'/purchase/startDate', state:{purchase: purchase }}}>
Источник
Другие вопросы по тегам