[typescript] components loose component prop with emotion or styled-component

When using styled components >=4.1.0 or emotion >=10 there will be type errors if material ui components are styled.

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

No build or type errors are expected when styling material ui components with styled components or emotion.

Current Behavior 😯

A lot of type errors like

TS2740: Type '{ children: string; }' is missing the following properties from type 'Pick<Pick<(Pick<PaperProps, "style" | "title" | "children" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "elevation" | "aria-activedescendant" | "aria-atomic" | ... 245 more ... | "innerRef"> & RefAttributes<...>) | PropsWithChildren<...>, "ref
" | ... 257 more ... | "innerRef"> & Partial<...>, "ref...': ref, style, title, className, and 254 more.

or

TS2322: Type '{ children: Element; component: string; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<DefaultComponentProps<{ props: { dense?: boolean | undefined; disablePadding?: boolean | undefined; subheader?: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<...>)> | n
ull) | (new (props: any) => Component<...>)> | undefine...'.
  Property 'component' does not exist on type 'IntrinsicAttributes & Pick<Pick<DefaultComponentProps<{ props: { dense?: boolean | undefined; disablePadding?: boolean | undefined; subheader?: ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<...>)> | null) | (new (props: any) => Component<...>)
> | undefine...'.

Steps to Reproduce 🕹

1. Checkout https://github.com/Mario-Eis/materialui-styled-test and npm install
2. Run npm script ‘serve-dev’ --> localhost:3000
3. Build errors are readable in the console.

I don’t know for sure, but I think there could be two different issues in the demo. The first is a simple styled Paper component. When downgrading to styled components <=4.0.3, this issue will be fixed. The second one is a styled List component. Styled List components will work, as long as there are no prop attributes set. If e.g. component="nav" is added, there will be an error. Downgrading to styled-components 4.0.3 won’t work here. But downgrading to material ui 3.9.2, will.

Both cases are shown in the demo.

Context 🔦

I want to style material ui components using styled-components library.

Your Environment 🌎

Tech	Version
Material-UI	4.0.0
React	16.8.17
TypeScript	3.4.5

[bengry]

@oliviertassinari why shouldn’t the workaround be part of MUI itself though?

[eps1lon]

const StyledList = styled(List)`
    background-color: blue;
    text-align: center;
` as typeof List;

Seems codemodable. Though you have to be aware that any type information about props handled by styled is lost.