Material-UI(MUI) 5 リリース

frontend

React と親和性の高い Material UI の 5 が2021年9月16日にリリースされました。

こんにちは 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

Migration from v4 to v5
https://mui.com/guides/migration-v4/

バージョン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

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

コメント

タイトルとURLをコピーしました