Reactでマテリアルデザインを作成する際によく使われているライブラリのMATERIAL-UIは2021年9月16日にv5になったタイミングでインストールする際のコマンドに変更が入っている。
React:17.0.0 以上、react-dom:17.0.0 以上の環境ではv4でのインストール方法を行おうとするとエラーになってインストールができない。
各変更名称は一致しているものがあるので、過去バージョンを使用しているチュートリアルでは、確認して変更すればいいかもしれない。表示内容にも変化があるらしいので、その点も注意。
変更内容
@material-ui/core -> @mui/material
@material-ui/system -> @mui/system
@material-ui/unstyled -> @mui/core
@material-ui/styles -> @mui/styles
@material-ui/icons -> @mui/icons-material
@material-ui/lab -> @mui/lab
@material-ui/types -> @mui/types
@material-ui/styled-engine -> @mui/styled-engine
@material-ui/styled-engine-sc ->@mui/styled-engine-sc
@material-ui/private-theming -> @mui/private-theming
@material-ui/codemod -> @mui/codemod
@material-ui/docs -> @mui/docs
@material-ui/envinfo -> @mui/envinfo
こんにちはMUI! 新しくなったMaterial UI v5
Reactのバージョン18は画面遷移とかに使うrootの仕様が大きく変わったり、そもそもバージョンが新しくなったのが今月ということもまだ対応プラグインなどではバージョン対応が行われていなかったりする。
簡単環境構築やVisualStudioでの画面の表示方法のメモ
src/index.js
(TypeScriptの場合はsrc/index.tsx
)が実行された際に一番最初に表示される内容のファイル- このファイルを消すとエラーが起きる
- 複数画面がある場合は追加で
src/App.js
(src/App.tsx
)がありそこでroterなどを使って各画面を表示、遷移させたりしている様子