Typescript and component selectors

[kptlronyttcna]

• emotion version: 9.1.3
• react version: 16

Consider Wrapper defined like this:

interface IconProps {
  name: string
  className?: string
}
const ReactIcon : React.StatelessComponent<IconProps> = .... // some react component
const Icon = styled(ReactIcon)``

const Wrapper = styled.div`
  ${Icon} {
      color: black;
  }
`

Then this component will not compile:

<Wrapper>
  <Icon name="menu" />
</Wrapper>

Typescript error:

TS2322: Type '{ children: Element[]; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<IconProps & { children?: ReactNode; } & ...'.
  Type '{ children: Element[]; }' is not assignable to type 'Readonly<IconProps & { children?: ReactNode; } & ClassAttributes<HTMLDivElement> & HTMLAttributes...'.
    Property 'name' is missing in type '{ children: Element[]; }'.

[kptlronyttcna]

Hmm. This one works

const Wrapper = styled.div`
  ${Icon as any} {
      color: black;
  }
`

[Ailrun]

Close this in favor of #675.