[Typography]{TypeScript] Styled Typography with component prop reports TypeScript error

[damir-sirola]

When the Typography component is styled with withStyles and if the component property is passed to it, TypeScript reports an error.
I have managed to track down when the regression happened and it was in version 4.8.1 of @material-ui/core. I believe it's related to the following commit

No overload matches this call.
  Overload 1 of 2, '(props: Pick<DefaultComponentProps<TypographyTypeMap<{}, "span">>, "title" | "style" | "ref" | "key" | "defaultChecked" | "defaultValue" | ... 256 more ... | "variantMapping"> & StyledComponentProps<...>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; component: string; gutterBottom: true; }' is not assignable to type 'IntrinsicAttributes & Pick<DefaultComponentProps<TypographyTypeMap<{}, "span">>, "title" | "style" | "ref" | ... 259 more ... | "variantMapping"> & StyledComponentProps<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Pick<DefaultComponentProps<TypographyTypeMap<{}, "span">>, "title" | "style" | "ref" | ... 259 more ... | "variantMapping"> & StyledComponentProps<...>'.
  Overload 2 of 2, '(props: PropsWithChildren<Pick<DefaultComponentProps<TypographyTypeMap<{}, "span">>, "title" | "style" | "ref" | "key" | "defaultChecked" | "defaultValue" | ... 256 more ... | "variantMapping"> & StyledComponentProps<...>>, context?: any): ReactElement<...> | ... 1 more ... | null', gave the following error.
    Type '{ children: string; component: string; gutterBottom: true; }' is not assignable to type 'IntrinsicAttributes & Pick<DefaultComponentProps<TypographyTypeMap<{}, "span">>, "title" | "style" | "ref" | ... 259 more ... | "variantMapping"> & StyledComponentProps<...> & { ...; }'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Pick<DefaultComponentProps<TypographyTypeMap<{}, "span">>, "title" | "style" | "ref" | ... 259 more ... | "variantMapping"> & StyledComponentProps<...> & { ...; }'.ts(2769)

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

TypeScript reports the error posted above

Expected Behavior 🤔

No TypeScript errors

Steps to Reproduce 🕹

Steps:

1. Create a styled Typography component
   const StyledTypography = withStyles({ root: { color: 'blue' } })(Typography)
2. Use styled typography and add the component prop
   <StyledTypography component="div">Text</StyledTypography
3. TypeScript underlines the component prop and reports the error message posted above

NOTE: I tried to reproduce the problem in TypeScript playground, but it's behaving strangely and it's reporting the error Module '"@material-ui/core"' has no exported member 'withStyles'. when I try to do import { withStyles } from '@material-ui/core'

Context 🔦

I'm trying to change the component type of a Typography element styled through withStyles decorator

Your Environment 🌎

Tech	Version
Material-UI	v4.9.2
React	v16.12.0
Browser	N/A
TypeScript	v3.7.5
etc.

[eps1lon]

Decorators can't preserver generic properties. We'd like to see this resolved in some way but don't have the bandwidth to do so. See #15695 for more context and possible workarounds.

[damir-sirola]

Thank you for quick response.
I'm not sure if we're talking about the same thing. I'm not talking about TypeScript decorator feature, but about withStyles function from @material-ui/core which is used to style the component.
Since it works in versions up to 4.8.0, I don't see why it can't continue to work going forward

[eps1lon]

I'm not talking about TypeScript decorator feature, but about withStyles function from @material-ui/core

decorators are not solely a TypeScript feature but a term used throughout programming. withStyles can be used as a decorator which is why I used the term.

Since it works in versions up to 4.8.0, I don't see why it can't continue to work going forward

We typed Typography so that it can infer the correct types from the passed component. It requires a generic type that is lost using withStyles.

[valecarlos]

have you been able to resolve this issue on your code @damir-sirola ? how could i go about adding the generic type to the new styled component?

[nstolmaker]

Anyone arriving here who finds that this is still a problem, like I did, I posted a solution here