为什么这个包装的样式组件错误“与"没有相同的属性? [英] Why this wrapped styled-component errors "has no properties in common with"

问题描述

在下面的代码中，Typescript 在 上给出了一个错误:

In the code below Typescript gives an error on <HeaderInner>:

[ts] 输入 '{children: Element;}' 与类型 'IntrinsicAttributes & 没有共同的属性.挑选&部分>, "className"> &...

[ts] Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Pick & Partial>, "className"> & ...

import * as React from 'react'
import styled from 'styled-components'

interface ContainerProps {
  className?: string
}

const Container: React.SFC<ContainerProps> = ({ children, className }) => <div className={className}>{children}</div>

const HeaderInner = styled(Container)`
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
`

interface HeaderProps {
  title: string
}

const Header: React.SFC<HeaderProps> = ({ title }) => (
  <HeaderInner>
    <span>{title}</span>
  </HeaderInner>
)

export default Header

这段代码之前使用了 Emotion，Typescript 很好用.我似乎无法发现这有什么问题.我正在使用样式组件 v4 及其类型和打字稿 v3.2.

This code was using Emotion before and Typescript was fine with it. I can't seem to spot anything wrong with this. I am using styled-components v4 and its typings and typescript v3.2.

推荐答案

我猜你在使用 styled-components 4.1.这是他们的打字定义错误.最简单的方法是降级并锁定版本为4.0.3.

I am guessing you are using styled-components 4.1. It's their typing definition bug. The easy way is to downgrade to and lock the version to 4.0.3.

这篇关于为什么这个包装的样式组件错误“与"没有相同的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！