MUI (Material-UI) v5 のスタイリング方法

2021年9月16日に MUI (Material-UI) v5 が正式にリリースされましたMaterial-UI v4 のリリースが 2019年3月なので、約2年半ぶりのメジャーアップデートです。正式名称が Material-UI から MUI に変更になり、パッケージ名も @material-ui/* から @mui/* になりました。

MUI v5 ではコンポーネントのスタイリングの実装方法や記法が一新し、Material-UI v4 以前までの独特な記法から、Theme UIchakra などで用いられている sx Prop によるスタイリングになりました。
大幅な変更になるので、v4 からの移行コストは大きいですが、新たに MUI を学ぶ人には優しくなった印象です。

MUI v5 のスタイリング方法を v4 の記法と比較しながら紹介していきます。

D3 v6 アロー関数使用時の移行ガイド

D3 v6 が2020年8月26日にリリースされました。D3 v6 では selection.on によるイベント処理の方法が変わりました。この記事では公式の移行ガイドに載っていないアロー関数使用時に限った移行の方法を記していきます。

移行ガイドというタイトルですが、実質的には以前書いたD3.jsでアロー関数を使う時の注意点 の v6 版です。