Material-UI(MUI) 5 リリース


React と親和性の高い Material UI 5.0 が2021年9月16日にリリースされました。
Material UI 5.4.1 は2022年2月8日にリリースされました。
Material UI 5.7.0 は2022年5月10日にリリースされました。



こんにちは MUI! 新しくなったMaterial UI v5 – 2021.09.26

名前が Material UI から MUI に変わったそうです。

MUI_ The React component library you always wanted

v5.0.0 – mui-org/material-u – github

Material-UI A popular React UI framework

MUI (Material-UI) v5 のスタイリング方法 – 2021年9月20日

Material-uiがv5へアップデートされたので、Next.jsで対応する。 – 2021年10月02日

Next.jsに新しくなったMUI(Material-UI v5)とEmotionを導入して新機能を試す – 2021-10-06

Next.jsでMaterial-UIを使う – 2021.08.21

material-ui/examples/nextjs – github

MUI-v5のスタイルエンジンについて – 2021年12月20日


Migration from v4 to v5


@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



[RFC] Material-UI v5 🚀 #20012

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

Material-UI Versions

Material-UI v5を先取りする

マテリアルデザイン仕様サポートを改善したMaterial-UI 4.9 リリース

Material UI v5 pre release


How to center a component in MUI and make it responsive?


Next.js はサーバーサイドレンダリングのため、そのままでは動かないそうです。
どうやら Material-UI は css の class 名を動的に生成するため、


Server Rendering

Next.js example

Next.js + TypeScript + Material-UI で静的HTMLをエクスポートするまで – 2021年5月2日

Next.js で Material-UI を使う

Next.js/TypeScriptプロジェクトにMaterial-UI/styled-componentsを対応させる – -2021-01-12

Material-UIとstyled componentsで,next.jsのcssをいい感じに管理する (Jest/TypeScript対応版)

【始め方】Next.js + Material-UI + styled-components + TypeScript + Storybook


React UIフレームワークのトレンド比較