TS表达式生成的联合类型太复杂，无法用Material-UI和@Reaction-Three/Fibre表示 [英] TS Expression produces a union type that is too complex to represent with Material-UI and @react-three/fiber

问题描述

我创建了一个Next.js应用程序，它使用Material-UI和@Reaction-Three/Fibre库。

我最近将Material-UI传递给V5，出现错误。

以下是错误：

我搜索了所有内容以将其删除，但什么也没有找到。

所以我尝试使用Material-UIV5创建一个新项目，并逐个安装其他依赖项。在开始时未显示错误，但在安装@react-three/fiber和@react-three/drei时出现错误。

所以我发现Box组件是从@material-ui和@react-three/drei导出的，所以我现在明白了错误。

这是我的package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-beta.2",
    "@material-ui/styles": "^4.11.4",
    "@react-three/fiber": "^7.0.6",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/react": "17.0.16",
    "eslint": "7.32.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }
}

我的tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

但我找不到如何修复它...

有人知道了吗？

推荐答案

解决方案1

稳定版本的MaterialUI解决了此问题。

使用此程序包：

npm install @mui/material

解决方案2Vivere

将component道具添加到div以避免打字错误。

<Box component="div">...</Box>

这篇关于TS表达式生成的联合类型太复杂，无法用Material-UI和@Reaction-Three/Fibre表示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！