3

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

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

样式使 NavLink 在反应中“不可点击”

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

...打字稿告诉我，“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 从未使用过。所以不知道该尝试什么。

通常与第三方组件类似的问题 -无法使用 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>
4

3 回答 3

2

你可能想检查这个例子，NavLink它的风格是迷人的，但Link也可以是风格的。点击作品。

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

于 2019-01-22T17:21:13.257 回答
0

我对问题的最新编辑...

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 不能这样做，因为它已经具有确切的类型，但现在它是一个实际的链接，并且可以向其中添加链接属性。

于 2019-01-24T11:07:20.890 回答
0

您的帖子中有错字，不知道您的代码中是否也存在：

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

它应该是

<PurchaseFooterItemLink to={{pathname:'/purchase/startDate', state:{purchase: purchase }}}>
于 2019-01-24T10:08:55.733 回答