【React × Typescript 】+ MaterialUI の環境構築

create-react-appでReact×Typescriptのドキュメントを作成

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

MaterialUIをインストールする

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

引用

https://mui.com/getting-started/installation/

完成したpackage.json

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/style": "^0.8.0",
    "@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"
    ]
  }
}

ここまでできたらあとはよしなに書いていけばMaterialUIが使えます。

---

注意点

https://mui.com/

このTOPページのコマンド
npm install @mui/material
だけでは機能しない。

@emotion/react @emotion/styled　この２つが無いと以下のエラーが出ます。

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 

簡単な問題ですが、よく見ないとつまずいてしまったため同じ問題にあたった方の助けになればうれしいです。