Typescript typings issue with Button component prop in combination with certain other props (like varient)

[deldrid1]

I am trying to follow along with https://material-ui.com/components/buttons/#third-party-routing-library and leveraging the nextjs-with-typescript example from material-ui. It appears that in some cases TypeScript has issues with certain combinations of properties.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.
  • It feels very similair to [Link] typescript error Property 'component' does not exist on type IntrinsicAttributes ... #16846 but that issue has been closed...

Current Behavior 😯

I've made two changes from https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript to demonstrate the expected behavior and the bug.

• In pages/about.tsx, on lines 17-19, I've replaced the Link component with a Button using the component={Link} prop as mentioned in the third-party-routing-library guide. I have also added a variant="outlined" prop to style the button, which causes TypeScript to throw this error:

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; color?: "inherit" | "default" | "primary" | "secondary" | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; ... 6 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ children: string; component: ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 272 more ... | "prefetch"> & RefAttributes<...>>; href: string; variant: "outlined"; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: "inherit" | "default" | "primary" | "secondary" | undefined; disabled?: boolean | undefined; ... 7 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { href: string; } & { children?: ReactNode; color?: "inherit" | "default" | "primary" | "secondary" | undefined; disabled?: boolean | undefined; ... 7 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.
  Overload 2 of 3, '(props: { component: ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 272 more ... | "prefetch"> & RefAttributes<...>>; } & { ...; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type 'string' is not assignable to type 'undefined'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element', gave the following error.
    Type '{ children: string; component: ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | ... 272 more ... | "prefetch"> & RefAttributes<...>>; href: string; variant: "outlined"; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; color?: "inherit" | "default" | "primary" | "secondary" | undefined; disabled?: boolean | undefined; ... 7 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; color?: "inherit" | "default" | "primary" | "secondary" | undefined; disabled?: boolean | undefined; ... 7 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.ts(2769)
Button.d.ts(55, 5): The expected type comes from property 'variant' which is declared here on type 'IntrinsicAttributes & { component: ForwardRefExoticComponent<Pick<LinkProps, "slot" | "style" | "title" | "className" | "classes" | "innerRef" | "key" | "defaultChecked" | ... 274 more ... | "prefetch"> & RefAttributes<...>>; } & { ...; } & { ...; } & CommonProps<...> & Pick<...>'

Expected Behavior 🤔

• In pages/index.tsx I've made the same change but instead of using variant="outlined", I've used color="secondary" and everything works as expected.

Steps to Reproduce 🕹

Refer to this codesandbox for a reproduction of the bug: https://codesandbox.io/s/bold-water-9xdld?file=/pages/about.tsx

Context 🔦

I'm guessing this is a silly TypeScript issue (I'm still learning and appreciate the value but also get frustrated by silly things like this). I want to be able to use the full power of buttons and not just certain combinations so this is blocking me. Other workarounds I've tried have various drawbacks as well..

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
TypeScript	v4.0.2 (see codesandbox for .tsconfig)
Next.js	v9.5.3

[eps1lon]

This was fixed in #21552 which is available in @material-ui/core@^5.0.0-alpha.1. We will not backport this fix to v4.