'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 |
---|