我不能使用Glamorous设计react-router-dom链接的样式

Question

对第三方组件应用样式的标准方法不适用于react-router-dom链接。

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

Styling makes NavLink 'unclickable' in react

我有以下代码，除了链接，所有的组件都是样式化的，它必须是样式化的。

  <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)'});

然后导入它并用它替换Link ...

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

...Typescript告诉我，"to“和"state”都不是存在的属性，所以它不会将其识别为react路由器链接。它将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从未被使用过。所以我真的不知道该怎么做。

通常与第三方组件类似的问题- Can't style third party components using 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

我对这个问题的最新修改...

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 answer...which正在强制样式定义中的类型正确...

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

我不确定为什么glamorous不能这样做，因为它已经有了确切的类型，但现在它是一个实际的链接，并且可以向它添加链接属性。

Answer 2

你可能想检查this example，在那里NavLink的样式是有魅力的，但是Link也可以是样式的。单击works。

只需检查您的代码是否与示例中的代码对应。(检查版本等)

Answer 3

你的帖子中有一个拼写错误，不知道它是否也存在于你的代码中：

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

它应该是

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