使用 @material-tailwind/react 和 nextjs14 时出现打字稿错误

Question

尝试在“next”中使用“@material-tailwind/react”：“^2.1.9”：“14.1.4”

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

export default function Home() {
  return <Button>Test MUI</Button>;
}

但按钮显示红色波浪线，有错误

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

Answer 1

我在使用 Vite + Typescript 进行 React 时遇到同样的问题，我使用的是 Node 20.12.1。

我在这里找到了解决方案：https://github.com/creativetimofficial/material-tailwind/issues/528问题出在新版本的@react/types包中。

如果降级应该可以修复。这样做：

1. 删除你的node_modules文件夹和package-lock.json
2. 手动在 package.json 上将 @types/react 的版本替换为“18.2.42”（注意不要包含 ^ 符号，如果保留它将不起作用）。
3. 使用 npm install 重新安装依赖项。

我还读到了一些 18.2.42 不起作用的情况，如果碰巧你尝试 18.2.19 版本。