React，Material-UI：如何使用打字稿用定制的道具组成功能组件

Question

我正在尝试使用Material-ui中的Button使MyCustomButton合成

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

interface MyButtonProps {
  'aria-label': string, // I'd like to add a aria-label as required property
  myOptionalProperty?: string
}

export default function MyButton(buttonProps: ButtonProps, myButtonProps: MyButtonProps) {
  return (
    <Button {...buttonProps, ...myButtonProps} />
  );
}

并且我收到以下错误代码： 分析错误：需要表达。

我已经通过official documents in material-ui获得了一些信息，但是我还没有完成写作。

完整代码位于https://codesandbox.io/s/jolly-dawn-keuj5

中

有人给我一些解决方案吗？

谢谢您的时间。

Answer 1

猜测您不需要将两个道具传递给<Button />

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

interface MyButtonProps {
  title: string,
  myOptionalProperty?: string
}

export default function MyButton<P extends ButtonProps>(myButtonProps: MyButtonProps) {
  return (
    <Button {...myButtonProps as P} />
  );
}

---

在线尝试：

---

如果这与您的需求不符，或者错过了重要事项，请通知我