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”都不是存在的属性，因此无法将其识别为反应路由器链接。它将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

编辑：打字稿错误消息是：

[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也可以样式。点击即可。

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

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

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

我无法使用Glamorous设置React-router-dom链接的样式

3 个答案: