title: Why this wrapped styled-component errors "has no properties in common with"
body: <p>In the code below Typescript gives an error on <code>&lt;HeaderInner&gt;</code>:</p>
  
  <blockquote>
    <p>[ts] Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes &amp; Pick &amp; Partial>, "className"> &amp; ...</p>
  </blockquote>
  
  <pre><code>import * as React from 'react'
  import styled from 'styled-components'
  
  interface ContainerProps {
    className?: string
  }
  
  const Container: React.SFC&lt;ContainerProps&gt; = ({ children, className }) =&gt; &lt;div className={className}&gt;{children}&lt;/div&gt;
  
  const HeaderInner = styled(Container)`
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  `
  
  interface HeaderProps {
    title: string
  }
  
  const Header: React.SFC&lt;HeaderProps&gt; = ({ title }) =&gt; (
    &lt;HeaderInner&gt;
      &lt;span&gt;{title}&lt;/span&gt;
    &lt;/HeaderInner&gt;
  )
  
  export default Header
  </code></pre>
  
  <p>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.</p>