[prop component] Doesn't allow for htmlFor prop in typescript when component="label"

[brad-decker]

Anytime I use the component prop on the Typography component I end up with type errors if I use the Intrinsic HTML props for that type of component. In this case, I am specifically referencing "htmlFor" when attempting to use a Typography component as a label.

• 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 😯

Using the component prop on the Typography component triggers type errors when also using intrinsic HTML props that are unique to that component type.

Tested examples:

1. label with htmlFor prop
2. a with href prop

Expected Behavior 🤔

When using the component prop the Intrinsic HTML Props for the component are passed through to the component without type error.

Steps to Reproduce 🕹

https://codesandbox.io/s/purple-darkness-38cyt
Steps:

1. Use the Typography Component
2. Specify a component prop of 'a'
3. Specify a 'href' prop
4. See the type error

Context 🔦

I have seen some workarounds on other issues that involved creating an intermediary component but the dynamic nature of how we are applying these values would require an unknown number of intermediary components to be created during render and I don't want to unnecessarily bog down a production application based on a type issue. In this case we are using Typography components to style our form and filter labels in our app.

Your Environment 🌎

Tech	Version
Material-UI	v4.6.1
React	v16.12.0
Browser	VSCode :P
TypeScript	v3.7.2
etc.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "strictNullChecks": true,
    "jsx": "preserve",
    "strict": false
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "../global-lib/src/types/**/*.ts",
    "src/next-env.d.ts",
    "src/global.d.ts",
    "src/styled.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}

[oliviertassinari]

I have updated the codesandbox link to use the latest version of the dependencies and to use the same tsconfig.json option that our project. The same error seems to display:

No overload matches this call.
Overload 1 of 2, '(props: TypographyProps, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
Type '{ children: string; component: "a"; href: string; }' is not assignable to type 'IntrinsicAttributes & TypographyProps'.
Property 'href' does not exist on type 'IntrinsicAttributes & TypographyProps'.
Overload 2 of 2, '(props: PropsWithChildren, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Component<...> | null', gave the following error.
Type '{ children: string; component: "a"; href: string; }' is not assignable to type 'IntrinsicAttributes & TypographyProps & { children?: ReactNode; }'.
Property 'href' does not exist on type 'IntrinsicAttributes & TypographyProps & { children?: ReactNode; }'.ts(2769)

[fyodor-e]

I'm taking over this issue. This can be solved with JSX generics.