Pull Request, which adds component prop to OverrideProps type, breaks MUI behavior

[e965]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

No response

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

It's about this pull-quest #35924

This PR seems to have broken some of the MUI use cases. Here is my example - we have a Link component in our application. It is a wrapper over Link from MUI, to which Link from react-router-dom is passed as component prop. The code looks like this:

import React from 'react';

import { Link as MuiLink, LinkProps as MuiLinkProps } from '@mui/material';
import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';

type LinkProps = MuiLinkProps<typeof RouterLink, RouterLinkProps>;

export const Link: React.FC<React.PropsWithChildren<LinkProps>> = ({ children, ...props }) => {
  return (
    <MuiLink component={RouterLink} {...props}>
      {children}
    </MuiLink>
  );
};

In case we needed to make a link button, we just did

import { Button } from '@mui/material';
import { Link } from '../path/to/Link';

<Button component={Link} to="/some-route">Link</Button>

and didn't experience any problems, everything worked. Now this case is not possible due to typescript errors.

Type 'FC<PropsWithChildren<LinkProps>>' is not assignable to type 'ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>> & FC<PropsWithChildren<LinkProps>>'.ts(2322)|
OverridableComponent.d.ts(42, 7): The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "inherit" | "primary" | ... 7 more ... | undefined; ... 9 more ...; variant?: "text" | ... 2 more ... | undefined; } & ... 4 more ... & CustomButtonProps<...>'

This is just one case, there are several more similar ones in our application. But the point is that this PR breaks MUI behavior, which always worked fine.

Your environment 🌎

npx @mui/envinfo

  npmPackages:
    @emotion/react:  11.11.1
    @emotion/styled:  11.11.0
    @mui/base:  5.0.0-beta.8
    @mui/core-downloads-tracker:  5.14.1
    @mui/icons-material:  5.14.1
    @mui/lab:  5.0.0-alpha.137
    @mui/material:  5.14.1
    @mui/private-theming:  5.13.7
    @mui/styled-engine:  5.13.2
    @mui/system:  5.14.1
    @mui/types:  7.2.4
    @mui/utils:  5.14.1
    @mui/x-data-grid:  6.10.1
    @mui/x-data-grid-premium:  6.10.1
    @mui/x-data-grid-pro:  6.10.1
    @mui/x-date-pickers:  6.10.1
    @mui/x-date-pickers-pro:  6.10.1
    @mui/x-license-pro:  6.10.0
    @types/react:  18.2.14
    react:  18.2.0
    react-dom:  18.2.0
    typescript: 5.1.3 => 5.1.3

[ZeeshanTamboli]

Duplicate of #38034