包装 Material-UI 按钮后键入脚本错误 - 错误：键入 '{children: string;颜色：“浅绿色”； }' 缺少以下属性

Question

我正在尝试在 next14 中创建基于 MUI (@material-tailwind/react) 的包装组件，但我在 MaterialButton 组件中遇到打字稿错误

Type '{ children: string; color: "light-green"; }' is missing the following properties from type 'Pick<ButtonProps, "children" | "className" | "color" | "disabled" | "translate" | "form" | "slot" | "style" | "title" | "onChange" | "onClick" | "value" | "key" | "autoFocus" | ... 259 more ... | "loading">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739)

代码是 页面.tsx

import MaterialButton from "@/components/MaterialButton";

export default function Home() {
  return (
    <div className="p-4">
      <MaterialButton color="light-green">Test</MaterialButton>
    </div>
  );
}

材质按钮.tsx

"use client";

import { Button } from "@material-tailwind/react";

type Props = React.ComponentProps<typeof Button>;

const MaterialButton = ({ children, ...restProps }: Props) => {
  return <Button {...restProps}>{children}</Button>;
};

export default MaterialButton;

Props 的定义应该是什么？？？

请注意，linter 正确建议了 props

Answer 1

错误消息表明

MaterialButton

组件缺少

Button

组件中的一些必需属性。要解决此问题，您应该更新

Props

类型定义以包含

Button

组件的所有必需属性。

我会尝试类似的事情

"use client";

import { Button, ButtonProps } from "@material-tailwind/react";

type Props = ButtonProps & { children: React.ReactNode };

const MaterialButton = ({ children, ...restProps }: Props) => {
  return <Button {...restProps}>{children}</Button>;
};

export default MaterialButton;