Question

在Typescript下面的代码中，<HeaderInner>出现错误：

[ts]类型'{children：Element; }'与'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。

Answer 1

我猜您正在使用样式组件4.1。这是他们的打字定义错误。简单的方法是降级到版本并将其锁定到4.0.3。

为什么这种包装的样式组件错误“与……没有共同的属性”

1 个答案: