reactjs - create-react-app MaterialUI خطا: فراخوانی هوک نامعتبر

میخواهم Create-react-app انجام دهم و از Material UI استفاده کنم، اما با خطای Hooks مواجه میشوم.

آیا چیزی دیگری را از دست دادهام؟

این یک بیانیه خطا است.

خطا: فراخوانی هوک نامعتبر. هوکها تنها میتوانند در داخل بدنه یک کامپوننت تابعی فراخوانی شوند. این میتواند به یکی از دلایل زیر رخ دهد:
ممکن است نسخههای ناسازگار از React و رندر کننده (مانند React DOM) داشته باشید
ممکن است قوانین هوکها را شکسته باشید
ممکن است بیش از یک نسخه از React در همان برنامه داشته باشید. برای نکاتی در مورد چگونگی رفع اشکال و حل این مشکل به https://reactjs.org/link/invalid-hook-call مراجعه کنید.

من موارد زیر را انجام دادم.

npx create-react-app my-app --template typescript

npm install @mui/material

npm install @mui/icons-material

پکیج.جیسان

{
  "name": "muitest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.2.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.37",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "typescript": "^4.5.2",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

اپ.tsx

import React from 'react';
import './App.css';
import GitHubIcon from '@mui/icons-material/GitHub';

function App() {
  return (
    <div className="App">
        <GitHubIcon />
    </div>
  );
}

export default App;

پاسخ شماره ۱

https://create-react-app.dev/docs/adding-typescript/ https://github.com/mui-org/material-ui

لطفاً هر دو لینک را مرور کن، باید چند بسته اضافه کنی سپس کار خواهد کرد.

npx create-react-app my-app --template typescript
npm install @mui/material @emotion/react @emotion/styled @types/material-ui

برای تایپاسکریپت، ما نیاز به نصب چند بسته @types داریم.