[v6] Link get No overload matches this call with Material-UI

[nuanyang233]

Version

6.0.0-beta.0

Test Case

function ListItemLinkUnStyled({ nested, ...props }: LinkProps & ListItemProps & { nested?: boolean; to: string }) {
    return <MuiListItem button component={Link} selected={!!useMatch(props.to)} {...props} />
}

Expected Behavior

working fine

Actual Behavior

The compont={Link} get a ts error

The last overload gave the following error.
    Type '{ replace?: boolean | undefined; state?: State | undefined; to: To & string; className?: string | undefined; style?: CSSProperties | undefined; slot?: string | undefined; ... 276 more ...; component: ForwardRefExoticComponent<...>; }' is not assignable to type 'IntrinsicAttributes & { button: true; } & { alignItems?: "flex-start" | "center" | undefined; autoFocus?: boolean | undefined; children?: ReactNode; ... 8 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { button: true; } & { alignItems?: "flex-start" | "center" | undefined; autoFocus?: boolean | undefined; children?: ReactNode; ... 8 more ...; sx?: SxProps<...> | undefined; } & Omit<...> & CommonProps & Pick<...>'.

Here is working fine in v5 version, I checked the code and found that the type definition of Link in v6 is different from that in v5

[timdorr]

There is no component prop in v6. It's supposed to be as, but was removed in the conversion to TypeScript for some reason. #7832 covers this issue already.

[nuanyang233]

There is no component prop in v6. It's supposed to be as, but was removed in the conversion to TypeScript for some reason. #7832 covers this issue already.

Sorry, I did not describe the problem correctly and caused you to misunderstand，the compoent is material-ui copmonent prop

Here I am hoping to use theLink component of react-router, passed to the component prop of the material-ui component.

But the Link type has changed in v6, the type can't cover material-ui component prop, cause the ts error, Although this was working before. And i compared the type changes between v5 and v6 versions. Something look like difference.

// v5 Link type
export interface LinkProps<S = H.LocationState> extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
    component?: React.ComponentType<any>;
    to: H.LocationDescriptor<S> | ((location: H.Location<S>) => H.LocationDescriptor<S>);
    replace?: boolean;
    innerRef?: React.Ref<HTMLAnchorElement>;
}
export function Link<S = H.LocationState>(
    ...params: Parameters<Link<S>>
): ReturnType<Link<S>>;

export interface Link<S = H.LocationState>
    extends React.ForwardRefExoticComponent<
        React.PropsWithoutRef<LinkProps<S>> & React.RefAttributes<HTMLAnchorElement>
    > {}

// v6 Link type
// Just HTMLAnchorElement, no more extend
export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
    replace?: boolean;
    state?: State;
    to: To;
}