使用 forwardRef 和 typescript 扩展 material-ui 组件答案

【问题标题】：Extend material-ui component using forwardRef and typescript使用 forwardRef 和 typescript 扩展 material-ui 组件
【发布时间】：2020-08-08 19:16:49
【问题描述】：

我有以下 javascript 代码，here is the full implementation。

    import Button from "@material-ui/core/Button";

    const RegularButton = React.forwardRef((props, ref) => {
      return (
        <Button {...rest} ref={ref} className={btnClasses}>
          {children}
        </Button>
      );
     }

如何使用 typescript 扩展 material-ui 组件？

【问题讨论】：

通过将文件的扩展名更改为.tsx
对不起，我的意思是使用正确的道具类型。类似的东西 ``` const RegularButton = React.forwardRef( (props: IRegularButtonProps, ref: any) => ``
这是答案stackoverflow.com/a/64151411/343900

标签： javascript reactjs typescript material-ui

【解决方案1】：

我找到了一个可能的答案here

interface IRegularButtonProps extends WithStyles<typeof buttonStyle> {
  color?: string;
  round?: boolean;
  ...
}

const RegularButton = React.forwardRef(
  (props: IRegularButtonProps, ref: any) => {
 ...
}

基本上它扩展了默认按钮道具以创建重载道具。我不知道这是否是正确的做法，但这是我找到的最佳解决方案。

【讨论】：