typescript - 为什么这个包装样式组件错误 "has no properties in common with"

Question

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

[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 可以很好地使用它。我似乎看不出这有什么不妥。我正在使用 styled-components v4 及其类型和 typescript v3.2。

Answer 1

我猜您正在使用 styled-components 4.1。这是他们的打字定义错误。简单的方法是降级并锁定版本到 4.0.3。