Почему эти обернутые ошибки styleled-компонента "не имеют общих свойств с"

Question

В приведенном ниже коде Typescript выдает ошибку на <HeaderInner>:

[ts] Type '{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 все было в порядке.Кажется, я не вижу в этом ничего плохого.Я использую Styled-компоненты v4 и его типизации и машинопись v3.2.

Answer 1

Я предполагаю, что вы используете стилевые компоненты 4.1.Это ошибка их определения.Самый простой способ - перейти на версию 4.0.3 и заблокировать ее.