CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
Moussa Harajli
Moussa Harajli

Reputation: 1516

React + Material-UI + Typescript: Inherit props from button to add different variants

I would like to extend the default Material-UI button to add more variants such as "square."

How can I define the prop interface to inherit/combine props.

Here's my code:

import React from "react";
import { Button as MuiButton } from "@material-ui/core";
import { ButtonProps as MuiButtonProps } from "@material-ui/core/Button";

interface ButtonProps extends MuiButtonProps {
  variant?: "square";
}

const defaultProps = {};

const Button: React.FC<ButtonProps> = ({variant, children, ...props}) => {
  return (
    <MuiButton variant={variant} {...props}>
       {props.children}
    </MuiButton>;
  )
};

Button.defaultProps = defaultProps;

export default Button;

Ideally, I would like to use this component like so:

<ExtendedButton href="/" variant="square">Click Me!</ExtendedButton>

Upvotes: 6

Views: 9332

Answers (1)

Fyodor Yemelyanenko
Fyodor Yemelyanenko

Reputation: 11848

The TYpeScript does not allows to override property when extending interfaces. So you should firstly exclude property from MuiButtonProps and then redefine it in ButtonProps.

import React from "react";
import { Button as MuiButton } from "@material-ui/core";
import { ButtonProps as MuiButtonProps } from "@material-ui/core/Button";

interface ButtonProps extends Pick<MuiButtonProps, Exclude<keyof MuiButtonProps, "variant">> {  
    variant?: "square" | MuiButtonProps["variant"];
}

Property exclusion with Pick and Exclude is for TypeScript 3.5 and below to 2.8. You may see another options to exclude properties depending on TypeScript version you use.

And as you wish to extend current type of existing property variant, you can use index access operator to get type of original variant property to union it with additional "square" type.

Upvotes: 5

Related Questions