我无法使用 Glamorous 设置 react-router-dom Link 的样式

Question

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

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

Styling makes NavLink 'unclickable' in react

我有以下代码，其中除了 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)'});

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

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

...Typescript 告诉我 "to" 和 "state" 都不存在，因此它没有将其识别为反应路由器 Link。它将 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 上时，它显示的类型如下，对我来说问题是类型显示为对象而不是 Link:

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

Answer 1

您可能需要检查 this example，其中 NavLink 的样式为 glamorous，但 Link 也可以设置样式。点击作品。

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

Answer 2

你的post有错别字，不知道你的代码中是否也有：

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

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

我无法使用 Glamorous 设置 react-router-dom Link 的样式

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

reactjs

react-router

styled-components

react-router-dom

glamorous