Link component="button" doesn't transpile anymore in a TypeScript project

[nulltoken]

Running

yarn create react-app repro_link --typescript
yarn add @material-ui/core

We end up with the following package.json:

{
  "name": "repro_link",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.9.3",
    "@types/jest": "24.0.11",
    "@types/node": "11.12.0",
    "@types/react": "16.8.10",
    "@types/react-dom": "16.8.3",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "typescript": "3.3.4000"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Repro steps:

• yarn start
• Add the following to App.tsx

 <Link
  component="button"
  variant="body2"
>
  Hmmmm...
</Link>

• Save

This generates the following message

Failed to compile.

C:/Users/nulltoken/AppData/Local/Temp/Repro/repro_link/src/App.tsx
TypeScript error: Type '"button"' is not assignable to type '"object" | "a" | "abbr" |
 "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "
big" | "blockquote" | "body" | "br" | "canvas" | "caption" | "cite" | ... 94 more ...
| undefined'.  TS2322

    22 |           </a>
    23 |           <Link
  > 24 |             component="button"
       |             ^
    25 |             variant="body2"
    26 |           >
    27 |             Hmmmm...

[nulltoken]

This usage seems supported from the doc standpoint though.

[nulltoken]

FWIW, downgrading to "@types/react": "16.8.8" then running yarn again to deploy the older version silences the issue (but strangely 😉 that doesn't seem like a long term reliable fix)...

[eps1lon]

This is a problem with generic props.

I'm wondering about the general use case of rendering a link as a button. Should we remove

If a link doesn't have a meaningful href, it should be rendered using a element.

from the docs?

Otherwise we should collect concrete examples for <Button component="a" /> vs. <Link component="button" />. It looks like this is motivated purely by looks and I'd rather have semantic components. A link should always have an href. Otherwise it's not a link, no?

[nmain]

It looks like this is motivated purely by looks and I'd rather have semantic components.

Wouldn't this mean a massive change to the Material UI API? Support for component is almost universal and it always works the same way:

1. Choose which Material Design visual style you want by choosing one of MUI's components.
2. Choose what semantic behavior you want by changing that component's component property.

[eps1lon]

But out components are not only style. Otherwise React would be a bit overkill.

There's probably some use case but I would still like to see one.