'React Material UI v5 TypeScript extend component type

How to extend MUI component type with props and add extra props with minimum imported stuff? If possible without giving types to props, only to component itself. Also I want to keep the ability of component to accept render component prop types: Button<typeof Link> with prop: component={Link}

import { Button as MuiButton } from '@mui/material'


const Button: typeof MuiButton = (props) => ...   
// this says props has type: any


const Button: ExtendButtonBase<ButtonTypeMap> = () => ....  
// this same:   props: any. I prefer not to import more stuff and use typeof MuiButton


const Button: typeof MuiButton = (props: ButtonProps<any>) => ....   
// this works for default component props, but does not accept additional custom props. 
// Also if possible without giving extra types to props, only to component


interface ExtraProps {
    test?: string
}

const Button: typeof MuiButton = (props: ButtonProps<any, ExtraProps>)
// when ExtraProps has required property it gives errors, but not when they are only optional
// this does not makes error when creating the component, but it makes when using it.


const Button = <C extends React.ElementType>(props: ButtonProps<C, {component?: C}> & ExtraProps) => ...
// This one works, but it does not feel like good implementation

const Button: OverridableComponent<ButtonTypeMap<ExtraProps>> = (props) => ...
// this works, but I can not use Component.defaultProps / propTypes. Also props has type: any

What is the best working way of doing this?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source