How does Material-UI Button component infer the props for the component passed to `component` prop?-CodePudding

Can anyone please explain how Material-UI extends the props of its Button component with the props of my component if I pass a specific component in the component prop?

interface MyLinkProps extends ButtonBaseProps {
  someRandomProp: string
}

const MyLink: React.FC<MyLinkProps> = () => {
  return <div></div>
}

<Button component={MyLink} someRandomProp="random">Something</Button>

As in this case, the Button component is now aware of the someRandomProp prop that belongs to my component; which is being passed to component prop on the Button component.

I would like to achieve the same effect. I have an Image component which has a prop component which I would like to infer the props of the component that is being passed.

For example, if there is something like:

<MyImage component={NextImage} {...propsOfNextImage} />

Basically, I would like MyImage to auto-detect and extend the props of NextImage.

CodePudding user response：

You can see the type definition of OverridableComponent