💡

Material UI v5の学習/参考記事

2021/12/21に公開

公式サイトでの学習記事

https://mui.com/getting-started/learn/#recommended-resources

Recommended Resourceが特に学習用に良い。

MUIのスタイルがhtml上でどこにinjectされるか

Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>, which gives MUI precedence over your custom styles. To remove the need for !important, you need to change the CSS injection order. Here's a demo of how it can be done in MUI:

参考: https://mui.com/guides/interoperability/#css-injection-order

<head>タグの一番下に取り入れられる。

過去のバージョンからのマイグレーション

v4からupdateした時に起こる現象として、v4で採用されているスタイリングシステムのJSSのスタイルが、v5のemotionのスタイル以前に適用され、cssが期待通り適用されてない場合が起こりうる。
以下議論されている。

https://github.com/mui-org/material-ui/issues/24109

v4からのマイグレーション方法は公式にある。

https://mui.com/guides/migration-v4/#heading-styles-broken-after-migrating-to-v5

v3からのマイグレーションも存在。ただし、v4へのマイグレーション

https://mui.com/guides/migration-v3/

日本語の記事

日本語で読むことが可能な記事で丁寧にまとめられている。

https://zenn.dev/h_yoshikawa0724/articles/2021-09-26-material-ui-v5

Discussion