MUI extending button props

user_1027814 0
Viewed 1137

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.

material-ui typescript reactjs javascript
1 Answers

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:

work example

user_124727360
Related