React と親和性の高い Material UI 5.0 が2021年9月16日にリリースされました。
Material UI 5.4.1 は2022年2月8日にリリースされました。
Material UI 5.7.0 は2022年5月10日にリリースされました。
v5.7.0
https://github.com/mui/material-ui/releases/tag/v5.7.0
v5.4.1
https://github.com/mui/material-ui/releases/tag/v5.4.1
こんにちは MUI！ 新しくなったMaterial UI v5 – 2021.09.26
https://zenn.dev/h_yoshikawa0724/articles/2021-09-26-material-ui-v5
名前が Material UI から MUI に変わったそうです。
MUI_ The React component library you always wanted
https://mui.com
v5.0.0 – mui-org/material-u – github
https://github.com/mui-org/material-ui/releases/tag/v5.0.0
Material-UI A popular React UI framework
https://material-ui.com/ja
MUI (Material-UI) v5 のスタイリング方法 – 2021年9月20日
https://qiita.com/cieloazul310/items/d630da98439c89d773ba
Material-uiがv5へアップデートされたので、Next.jsで対応する。 – 2021年10月02日
https://qiita.com/akki-memo/items/21a38c18b2a03f6663d0
Next.jsに新しくなったMUI(Material-UI v5)とEmotionを導入して新機能を試す – 2021-10-06
https://zuma-lab.com/posts/next-mui-emotion-settings
Next.jsでMaterial-UIを使う – 2021.08.21
https://amateur-engineer-blog.com/how-to-use-material-ui-with-nextjs
material-ui/examples/nextjs – github
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
MUI-v5のスタイルエンジンについて – 2021年12月20日
https://qiita.com/art_porokyu/items/0d64bddc71d0e0d2f9f2
4から5への移行
Migration from v4 to v5
https://mui.com/guides/migration-v4
基本以下の置き換えをする必要がありそうです。
@material-ui/core/styles -> 廃止
@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
バージョン5
バージョン5の詳細については以下に書かれています。
[RFC] Material-UI v5 🚀 #20012
https://github.com/mui-org/material-ui/issues/20012
Introduction
Material-UI v4 was released 10 months ago, per our release schedule. It’s time to plan for v5.
Our GitHub milestone has a due date for October 1st 2020, and while I doubt we will release in time, planning 6 months ahead seems relevant.Developers made it clear in the past that they don’t enjoy breaking changes. This is feedback we took into consideration when designing our versioning strategy, and for each minor/patch releases. The result was to commit to a minimum of 1 year between each major release.
At the same time, the v0 to v1 upgrade was a major breaking change (a rewrite with a brand new API) and yet it was successful. I think that we should be willing (taking the risk) to make bold changes, as long as they fit in the direction we see the community going in the long term (with Material-UI empowering it).
以下の項目が v5 の大きな目玉のようです。
1. Unstyled components
2. Full strict mode support
3. Migrate to styled-components
4. Enable the use of @material-ui/system’s props in the core components
5. Allow the use of dynamic theme variants and colors
This is the first beta release of v5! A huge thanks to everyone who helped to make this happen! We’re targeting the 1st of September for a stable release, and will use the next two months to polish v5, and ease the migration from v4. You can follow the v5 stable milestone for more details. We now encourage any new projects to start on v5.
Material-UI Releases
https://github.com/mui-org/material-ui/releases
Material-UI Versions
https://material-ui.com/versions
Material-UI v5を先取りする
https://tech.techtouch.jp/entry/material-ui-v5_9
マテリアルデザイン仕様サポートを改善したMaterial-UI 4.9 リリース
https://www.infoq.com/jp/news/2020/08/material-UI-design-specification
Material UI v5 pre release
Grid
How to center a component in MUI and make it responsive?
https://stackoverflow.com/questions/50766693/how-to-center-a-component-in-mui-and-make-it-responsive
Next.js
Next.js はサーバーサイドレンダリングのため、そのままでは動かないそうです。
ちょっとコツがいります。
どうやら Material-UI は css の class 名を動的に生成するため、
生合成をとる処理を書かないと、ずれてしまうそうです。
わかったような、わからんような。
Server Rendering
https://material-ui.com/guides/server-rendering
Next.js example
https://github.com/mui-org/material-ui/tree/master/examples/nextjs
Next.js + TypeScript + Material-UI で静的HTMLをエクスポートするまで – 2021年5月2日
https://qiita.com/k-okajima/items/5bb305a1fbbed2624993
Next.js で Material-UI を使う
https://maku.blog/p/s6djqw3
Next.js/TypeScriptプロジェクトにMaterial-UI/styled-componentsを対応させる – -2021-01-12
https://zuma-lab.com/posts/next-material-ui-styled-components-settings
Material-UIとstyled componentsで，next.jsのcssをいい感じに管理する (Jest/TypeScript対応版)
https://qiita.com/o3c9/items/2551820edc156704edba
【始め方】Next.js + Material-UI + styled-components + TypeScript + Storybook
https://qiita.com/hasehiro0828/items/c7fcae701227aa18a556
Material-UIでNext.jsのポイントを紹介する
https://note.com/note_fumi/n/n6b04683e94fd
React UIフレームワークのトレンド比較
https://qiita.com/yudwig/items/8d8c29467ceb76a91be9
コメント