[Typescript] Button do not accept custom component

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

Current Behavior 😯

              <Button component={Link} variant="outlined" size="small">
                Sign in
              </Button>

Expected Behavior 🤔

It should be able to pass component

Steps to Reproduce 🕹

Steps:

Context 🔦

Your Environment 🌎

//tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "baseUrl": ".",
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./*"]
    },
    "removeComments": true,
    "resolveJsonModule": true,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "target": "esnext",
    "isolatedModules": true
  }
}

Tech	Version
Material-UI	v4.3.1
React	16.8.6
Browser
TypeScript	3.5.3
etc.

[khryshyn]

The solution is not working if you’re using the styled-components

[vishalrajole]

I confirm same issue with Button and styled components in version

"@emotion/react": "11.4.0",
"@emotion/styled": "11.3.0",
"@material-ui/core": "5.0.0-alpha.37",
"@material-ui/icons": "5.0.0-alpha.37",
"styled-components": "5.2.3",
"typescript": "4.2.4"

I am consuming styled button as below

<S.ProfileButton
      aria-describedby={id}
      component="span"                // <=== _typescript errors out here for component prop_
      onClick={handleClick}
      endIcon={<ExpandMoreProfileIcon />}>
      .......other code
</S.ProfileButton>

Button wrapped as Styled component

import { Button } from '@material-ui/core';
........ other code
export const ProfileButton = styled(Button)`
    width: 100%;
    border-radius: 0;
    background-color: ${Colors.black};
    height: 72px;
}`;

Error

No overload matches this call.
  Overload 1 of 2, '(props: Omit<Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "error" | "secondary" | "primary" | "success" | "info" | "warning" | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: Element; "aria-describedby": string | undefined; component: string; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; endIcon: Element; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Omit<Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<ExtendButtonBase<ButtonTypeMap<{}, "button">>, any, {}, never, ExtendButtonBase<ButtonTypeMap<{}, "button">>, ExtendButtonBase<...>>): ReactElement<...>', gave the following error.
    Type '{ children: Element; "aria-describedby": string | undefined; component: string; onClick: (event: MouseEvent<HTMLElement, MouseEvent>) => void; endIcon: Element; }' is not assignable to type 'IntrinsicAttributes & Omit<Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.
      Property 'component' does not exist on type 'IntrinsicAttributes & Omit<Omit<{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>, never> & Partial<...>, "theme"> & { ...; } & { ...; }'.ts(2769)

Here is code sandbox replicating same issue. https://codesandbox.io/s/mui-styled-button-vliel?file=/src/App.tsx @oliviertassinari appreciate your help here again as this is blocking 👏