0
239
ViewsMUI extending button props
I want to extend the MUI5 components and also use their component prop. To do that according to the documentation I make it work in the below code:
import Button, { ButtonProps } from '@mui/material/Button';
import React from 'react';
export type MyButtonProps<C extends React.ElementType> = ButtonProps<C, { component?: C }> & {
myOtherField: string;
};
export function MyButton<C extends React.ElementType>(props: MyButtonProps<C>) {
const { myOtherField, ...buttonProps } = props;
return <Button {...buttonProps}></Button>;
}However when I try to access anything belongs to MUI5 button attributes, vscode is not helping me to find it
see the below screenshot:
But after adding it manually it is not complaining about it.
see the below screenshot and check that it is inferring the type as any
However if I remove the <C extends React.ElementType> logic from the type it is working like a charm (but it has a drawback since it is now complaining about the component prop when I use it anywhere in my application):
What can be the problematic part in the first place when I am extending MUI5 button prop types?
thank you in advance.
1 answers
Answer question0
This is the easy way I found for your usecase:
type NewButtonProps = ButtonProps & {
otherField: number;
component: React.ElementType;
};
function Button3({ otherField, ...props }: NewButtonProps) {
const y = props.onClick;
const x = otherField;
return <Button {...props}></Button>;
}
All the attributes is understand by typescript now:
