我无法使用 Glamorous 来设计一个 react-router-dom 链接

Question

将样式应用于第三方组件的标准方式不适用于react router dom Links。

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

样式使NavLink'；可拆卸'；反应中

我有以下代码，其中除了链接之外的所有组件都是样式化的，并且必须对其进行样式化。

<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"one_answers"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。所以不知道该尝试什么。

与一般第三方组件类似的问题-Can'；使用魅力的t型第三方组件

编辑：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

您可能需要查看此示例，其中NavLink的样式具有魅力，但Link也可以进行样式设置。单击有效。

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

Answer 2

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

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

应该是

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

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

不确定为什么魅力不能做到这一点，因为它已经有了确切的类型，但现在它是一个真正的链接，链接属性可以添加到它。