Why this wrapped styled-component errors "has no properties in common with"

Question

In the code below Typescript gives an error on <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

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.

Answer 1

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.