[Link] LinkProps missing component prop

[vedrxn]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The LinkProps type does not include a component field.

Expected behavior 🤔

The LinkProps type does include a component field.

Steps to reproduce 🕹

Following these docs, the example code throws an error:
the LinkProps type does not include a component field.

The ThemeOptions type is using LinkProps as the type for theme.components.MuiLink.defaultProps.

See this alternate example, typescript playground.

The alternate example shows that this issue also affects users who use Link as a root node (assuming props spread).

Context 🔦

Discovered while using react-router's Link component as MuiLink's default component, following these docs. A simplified approach to reproduce, try "a" or "div" as MuiLink's component prop value in createTheme.

A quick look at the material-ui source code:

This ThemeOptions type
uses this components type
which uses this props type
which uses this LinkProps type.

That LinkProps type doesn't appear to use OverridableComponent, which may be the issue. The Link type in the same file does.

Your environment 🌎

N/A

[plmwd]

Is there a workaround for this?

[geirsagberg]

@plmwd A workaround is to cast the props:

import { createTheme, LinkProps as MuiLinkProps } from '@mui/material'
import React from 'react'
import { Link, LinkProps } from 'react-router-dom'

export const colors = {
  linkBlue: '#2C73FF',
}

const LinkBehavior = React.forwardRef<
  any,
  Omit<LinkProps, 'to'> & { href: LinkProps['to'] }
>((props, ref) => {
  const { href, ...other } = props
  // Map href (MUI) -> to (react-router)
  return <Link ref={ref} to={href} {...other} />
})
LinkBehavior.displayName = 'LinkBehavior'

export const theme = createTheme({
  components: {
    MuiButtonBase: {
      defaultProps: {
        LinkComponent: LinkBehavior,
      },
    },
    MuiLink: {
      defaultProps: {
        color: colors.linkBlue,
        component: LinkBehavior,
      } as MuiLinkProps, // https://github.com/mui/material-ui/issues/29942
    },
  },
}

[jayKayEss]

@geirsagberg I had to cast to LinkBaseProps to get the workaround to work, but thank you!

[plmwd]

This is great. Thank you @geirsagberg!

[mnajdova]

I think this doesn't work for more components. We need to add a TS spec test and verify if this works for all components. Then we should either try to find a fix to the issues or document how it can be used. cc @mui/core

[michaldudak]

The problem with overriding the component prop in a theme is that TS won't suggest/allow props of the overridden component.

Consider the following example: https://codesandbox.io/s/component-override-in-theme-qk0p5t?file=/src/Demo.tsx

Even though Chip's component is set to a, TS complains when we use the href prop on it.
Because of this, I think we should recommend wrapping MUI components in custom ones when a global component prop override is needed:

const LinkChip = React.forwardRef(function LinkChip(props: ChipProps<"a">, ref: React.ForwardedRef<HTMLAnchorElement>) {
  return <Chip {...props} ref={ref} component="a" />
});