[prop component] ButtonBaseProps not accepting a component property

Expected Behavior 🤔

component property should be accepted

Current Behavior 😯

component property is not accepted

Steps to Reproduce 🕹

const props: ButtonProps<'span'> = {
  component: 'span',
  ^^^^^^^^^^^^^^^^^ 'component' does not exist in type ...
  onClick(event: React.MouseEvent<HTMLSpanElement>) {},
};

Context 🔦

Need for integration with a third-party routing library

Your Environment 🌎

Tech	Version
Material-UI	v4.0.0
TypeScript	v4.1.0

---

Edit @eps1lon: Heavily editorialized the original issue which was inaccurate and misleading.

Most of the issue has been solved, see https://next.material-ui.com/guides/typescript/#usage-of-component-prop

[bengry]

To add to this, the following doesn’t compile in TypeScript in MUIv4, but should:

// MyButton.ts
import { Button } from '@material-ui/core'
import { ButtonProps } from '@material-ui/core/Button'
import React from 'react'

export const MyButton = React.forwardRef<HTMLButtonElement, ButtonProps>((btnProps, ref) => (
  <Button
    ref={ref}
    variant="contained"
    color="primary"
    {...btnProps}
  />
))

// MyPage.ts

function MyPage() {
  return (
    <MyButton component={Link}> // <-- error on this
      Click me
    </MyButton>
  )
}

error message is:

Type ‘{ children: string; component: FunctionComponent<{}>; }’ is not assignable to type ‘IntrinsicAttributes & Pick<{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; centerRipple?: boolean | undefined; … 6 more …; TouchRippleProps?: Partial<…> | undefined; } & { …; } & CommonProps<…> & Pick<…>, "c…’. Property ‘component’ does not exist on type ‘IntrinsicAttributes & Pick<{ action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; centerRipple?: boolean | undefined; … 6 more …; TouchRippleProps?: Partial<…> | undefined; } & { …; } & CommonProps<…> & Pick<…>, "c…’.

I’m using TypeScript 3.3.3, but also checked 3.4.5, and getting the same error

[alexeychikk]

Is this about to be fixed or is it even considered a bug? I just copy-pasted the code from the docs for my link component with minor changes and the TS error shows up:

Property ‘component’ does not exist on type 'IntrinsicAttributes…

import Button, { ButtonProps } from "@material-ui/core/Button";
import { withStyles, WithStyles } from "@material-ui/core/styles";
import { GatsbyLinkProps, Link } from "gatsby";
import * as React from "react";

import { styles } from "./ButtonLink.styles";

export type ButtonLinkProps = WithStyles<typeof styles> &
  ButtonProps &
  GatsbyLinkProps<{}> & {
    partiallyActive?: boolean;
    replace?: boolean;
    to: string;
  };

const LinkComponent = React.forwardRef<HTMLAnchorElement, GatsbyLinkProps<{}>>(
  ({ ref, innerRef, ...props }, linkRef) => (
    <Link innerRef={linkRef as Function} {...props} />
  ),
);

class ButtonLink extends React.PureComponent<ButtonLinkProps> {
  public render() {
    const { classes, innerRef, ...props } = this.props;
    return (
      <Button
   {/* ^^^^^^ Property 'component' does not exist on type 'IntrinsicAttributes... */}
        component={LinkComponent}
        activeClassName={classes.active}
        {...props}>
        {this.props.children}
      </Button>
    );
  }
}