[Link] typescript error Property 'component' does not exist on type IntrinsicAttributes ...

Link does not accept component property on some cases

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

I’ve looked #14970 #15827 but didn’t find the solution

Expected Behavior 🤔

<Link component={MyComponent} />

should compile with no error

Current Behavior 😯

In some cases(required props not supplied), typescript reports error Property 'component' does not exist on type IntrinsicAttributes & AnchorHTMLAttributes<HTMLAnchorElement> ...

Steps to Reproduce 🕹

Link: codesandbox

1. Open demo.tsx
2. Sees 3 compilation errors

Code:

import React, { ReactNode } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Link, { LinkProps } from "@material-ui/core/Link";
import { Link as RouterLink } from "react-navi";

const useStyles = makeStyles(theme => ({
  link: {
    marginRight: theme.spacing(1),
    cursor: "pointer"
  }
}));

interface Props {
  to: string;
  children: ReactNode;
}

function SimpleLink(props: Props) {
  const { to, children, ...restProps } = props;
  return (
    <a {...restProps} href={to}>
      {children}
    </a>
  );
}

function IconLink(props: LinkProps) {
  return (
    <Link {...props} component={RouterLink}>
      !SomeIcon
    </Link>
  );
}

export default function ButtonRouter() {
  const classes = useStyles();
  return (
    <>
      <Link className={classes.link}>Plain</Link>

      <Link className={classes.link} component={SimpleLink}>
        !Simple
      </Link>

      <Link
        className={classes.link}
        to="https://github.com"
        component={SimpleLink}
      >
        Simple
      </Link>

      <Link className={classes.link} component={RouterLink}>
        !Navi Router
      </Link>

      <Link
        className={classes.link}
        href="https://frontarm.com/navi"
        component={RouterLink}
      >
        Navi Router
      </Link>

      <IconLink />
    </>
  );
}

Context 🔦

Wrap Link component to provide custom tooltip, styles etc.

Your Environment 🌎

Tech	Version
Material-UI	^4.2.1
React	16.8.6
Browser	Chrome
TypeScript	3.5.3

[bristoljon]

Anyone else think the best solution might be just to not use Typescript?!

[trainbolt]

What is the status of this??? It does not seem like there’s a fix for this or some solution that helps us solve the issue.

Custom Button

import { Button, createStyles, withStyles, WithStyles } from "@material-ui/core";
import { ButtonProps } from "@material-ui/core/Button";
import React from "react";
import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
import Colors, { rgba } from "theme/colors";

const styles = () =>
  createStyles({
    root: {
      color: rgba(Colors.white, 0.5),
      backgroundColor: rgba(Colors.white, 0.05),
      "&:hover": {
        color: rgba(Colors.white, 0.75),
        backgroundColor: rgba(Colors.white, 0.2)
      }
    }
  });

const LinkRef = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
  <RouterLink innerRef={ref} {...props} />
));

class CustomButton extends React.Component<ButtonProps & WithStyles> {
  public render() {
    return <Button component={LinkRef} {...this.props} />;
  }
}

export default withStyles(styles)(LoginSignupButton);

Usage

<CustomButton to="/register" component={Link}>Button Text</CustomButton>

Error

No overload matches this call.
  Overload 1 of 3, '(props: { href: string; } & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 282 more ...; component: ForwardRefExoticComponent<...>; }' is not assignable to type 'IntrinsicAttributes & { href: string; } & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<...> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps...'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { href: string; } & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<...> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps...'.
  Overload 2 of 3, '(props: { component: ForwardRefExoticComponent<LinkProps<any> & RefAttributes<HTMLAnchorElement>>; } & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; ... 8 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Property 'to' is missing in type '{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 282 more ...; component: ForwardRefExoticComponent<...>; }' but required in type 'Pick<LinkProps<any> & RefAttributes<HTMLAnchorElement>, "ref" | "component" | "to" | "replace" | "download" | "href" | "hrefLang" | "media" | "ping" | "rel" | "target" | "type" | ... 252 more ... | "key">'.
  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ExtendButtonBaseTypeMap<{ props: { color?: "inherit" | "primary" | "secondary" | "default" | undefined; disableFocusRipple?: boolean | undefined; endIcon?: ReactNode; fullWidth?: boolean | undefined; href?: string | undefined; size?: "small" | ... 2 more ... | undefined; startIcon?: ReactNode; variant?: "text" | ... 2 more ... | undefined; }; defaultComponent: "button"; classKey: ButtonClassKey; }>>>): Element', gave the following error.
    Type '{ action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 282 more ...; component: ForwardRefExoticComponent<...>; }' is not assignable to type 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject<ButtonBaseActions> | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & CommonProps<...> & Pick<...>'.