When looking at the following code, Typescript is flagging 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 snippet of code was previously utilizing Emotion without any issues with Typescript. The transition to styled-components version 4 and Typescript version 3.2 seems to have caused this discrepancy. It's challenging to identify what might be causing the error.