Question

我想扩展默认的Material-UI按钮以添加更多的变体，例如“正方形”。

如何定义prop接口以继承/合并prop。

这是我的代码：

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;

理想情况下，我想像这样使用此组件：

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

Answer 1

扩展接口时，TYpeScript不允许覆盖属性。因此，您应该首先从MuiButtonProps中排除属性，然后在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"];
}

使用Pick和Exclude排除的属性适用于TypeScript 3.5及以下版本2.8。您可能会看到another options排除属性，具体取决于您使用的TypeScript版本。

并且您希望扩展现有属性variant的当前类型时，可以使用索引访问运算符获取原始variant属性的类型，以将其与其他"square"类型进行合并。 / p>

React + Material-UI + Typescript：从按钮继承道具以添加不同的变体

1 个答案: