reactjs - 我无法使用 Glamorous 设计 React-router-dom 链接

Question

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

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”都不是存在的属性，因此它不会将其识别为 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

您可能需要检查this example其中 NavLink 的样式是有魅力的，但是 Link 也可以有样式。点击作品。

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