Emotion: [@emotion/styled 10] TypeError using styled with @material-ui/core components after upgrade to v10

[sergiohgz]

• typescript version: 3.2.2
• emotion version: 10.0.6
• react version: 16.7.0
• material-ui version: 3.8.2

Relevant code:

const StyledTypography = styled(Typography)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main,
}));
// ...
<StyledTypography variant="h6" //...
 ^^^^^^^^^^^^^^^^

What you did: With Typescript and using @material-ui/core 3.7 or 3.8, try to upgrade from Emotion 9 to Emotion 10.

What happened: Using @material-ui/core with the upgraded Emotion 10 cause a TypeError when styling any material-ui component with styled function.

Error log:

Type error: Type '{ children: ReactNode[]; variant: "h6"; }' is not assignable to type '(IntrinsicAttributes & TypographyProps & ClassAttributes<Component<TypographyProps, any, any>> & Pick<(TypographyProps & ClassAttributes<Component<TypographyProps, any, any>>) | (TypographyProps & Attributes), "title" | ... 258 more ... | "innerRef"> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 4 more ... & {...'.
  Type '{ children: ReactNode[]; variant: "h6"; }' is not assignable to type 'IntrinsicAttributes & TypographyProps & Attributes & Pick<(TypographyProps & ClassAttributes<Component<TypographyProps, any, any>>) | (TypographyProps & Attributes), "title" | ... 258 more ... | "innerRef"> & { ...; } & { ...; }'.
    Type '{ children: ReactNode[]; variant: "h6"; }' is missing the following properties from type 'Pick<(TypographyProps & ClassAttributes<Component<TypographyProps, any, any>>) | (TypographyProps & Attributes), "title" | "color" | "hidden" | "style" | "children" | ... 254 more ... | "innerRef">': style, classes, className, headlineMapping, innerRef  TS2322

Reproduction: A GitHub repository is provided next with an example (based on a simple material-ui component, Typography. Also, there is a CodeSandbox with the same code, but it hides the problem and works.

• GitHub
• CodeSandbox

Problem description: When using styled from @emotion/styled with any component from @material-ui/core, the second part of the args contains a type error, so there is no way to use. Styling HTML components works well (div, span, etc) or any component created by user works like a charm. Also, this happens with template literal syntax.

Suggested solution: Currently, I tried to type styled(Typography)<any>({}) but with this solution we will lose the types in the style object, so this isn't a solution at all, only the worst bypass I should never thought.

[darrentorpey]

I've been having the same problem. This is the best workaround I've found thus far:

const StyledTypography = styled(Typography)(({ theme }) => ({
  backgroundColor: theme.palette.secondary.main,
})) as typeof Typography;

[Andarist]

@JakeGinnivan could you check if this works with your typings? I believe it should

[JakeGinnivan]

PR opened with a test to verify it all compiles correctly.

[Andarist]

This has been fixed by https://github.com/emotion-js/emotion/pull/1501 (although this will land in v11 - but hopefully this happens this month). In addition to that, a test is being added as part of #1607 so this will guard us against regressing on this one.