Material-ui: [styled(Link)] TypeScript error: Link does not accept `component` attribute

[antoinerousseau]

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

Expected Behavior 🤔

I should be able to specify which component my styled <Link> should use to display, e.g.:

import { Link as RouterLink } from "react-router-dom"
import { Link } from "@material-ui/core"
import { styled } from "@material-ui/styles"

const StyledLink = styled(Link)({
  color: "red",
})

export default () => 
  <StyledLink component={RouterLink} to="/password">Forgot your password?</StyledLink>

Current Behavior 😯

TypeScript error in Login.tsx(123,16):
Type '{ children: string; component: typeof Link; }' is not assignable to type 'IntrinsicAttributes & Pick<DefaultComponentProps<{ props: AnchorHTMLAttributes<HTMLAnchorElement> & Pick<TypographyProps, "style" | "title" | "color" | "display" | "hidden" | "ref" | "children" | ... 255 more ... | "variantMapping"> & { ...; }; defaultComponent: "a"; classKey: LinkClassKey; }>, "style" | ... 270 mor...'.
  Property 'component' does not exist on type 'IntrinsicAttributes & Pick<DefaultComponentProps<{ props: AnchorHTMLAttributes<HTMLAnchorElement> & Pick<TypographyProps, "style" | "title" | "color" | "display" | "hidden" | "ref" | "children" | ... 255 more ... | "variantMapping"> & { ...; }; defaultComponent: "a"; classKey: LinkClassKey; }>, "style" | ... 270 mor...'.  TS2322

Steps to Reproduce 🕹

https://codesandbox.io/s/loving-cannon-ed5e8

Context 🔦

I want to style to my link, but maybe there are other ways :)

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| @material-ui/core | 4.0.0-beta.2 |
| @material-ui/styles | 4.0.0-beta.2 |
| react-router-dom | @5.0.0 |
| React | 16.8.6 |
| Browser | Chrome 74 macOS |
| TypeScript | 3.4.5 |

[antoinerousseau]

Note that I was able to do it the other way around:

const PasswordLink = styled(RouterLink)({
  color: "red",
})

export default () => 
  <Link to="/password" component={PasswordLink}>Forgot your password?</Link>

[eps1lon]

This is a TypeScript limitation regarding argument inference and overloaded function signatures.

const StyledLink = styled(Link)({
  color: "red",
}) as Link;

should fit too but removes all types for props from styled.

[antoinerousseau]

ok, thanks!