[Typescript] Button do not accept custom component

[michael-land]

• [ 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.

[eps1lon]

Please include where Button and Link come from.

[vtrphan]

i also have this problem currently, after upgrading to MUI 4. My Button component comes from "@material-ui/core" and Link is my custom component. Please advise

[eps1lon]

Please show the full source.

[vtrphan]

sure

export class Link extends React.PureComponent<LinkProps, {}> {
...
return (
      <a {...others} className={cssClass}>
        {icon && this.renderIcon()}
        <span>{children}</span>
      </a>
    );
}
const DownloadLink = (props: any) => <Link href={this.getDownloadLink()} underline={false} {...props} />;

<Button
              disabled={!isValid || isSubmitting}
              component={DownloadLink}
              onClick={() => this.setState({ isSubmitting: true }, () => setTimeout(this.close, 1000))}
              color="secondary"
 >

TypeScript 3.0.3
MUI: latest
Error:

Property 'component' does not exist on type 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefin
ed; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.

[eps1lon]

This should trigger runtime warnings. https://material-ui.com/components/buttons/#ButtonRouter.tsx shows an example how to properly create a component for the runtime and how to type it.

[vtrphan]

How is that different from my implementation, except for the "forwardRef" ? Is it generally required or only required if i use react-router?

[vtrphan]

There's a comment here from another open but similar issue:
#16846 (comment)
Apparently implementing with the forwardRef solves the issue, but will not work with styled component?

[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 👏