Vite + React + TypeScript 環境で MUI v5 を使用しています。 今回は MUI v5 の Theme についてTips的にまとめてみました。 テーマをアプリケーション全体に適用する Light モードと Dark モードを切り替える テーマの色を変更する テーマを一部のコンポーネントに適用する 適用されているテーマの一部を変更したテーマを作成し、一部のコンポーネントに適用する テーマに欧文フォント・日本語フォントを追加する テーマに独自のカラーキーワードを追加し、ボタンで使用する Themeの基本 デフォルトテーマ MUI には Light モード用のデフォルトテーマと Dark モード用のデフォルトテーマが用意されています。 それぞれのテーマに設定されている値などは 公式: Default Theme で確認できます。 テーマをアプリケーション全体に適用する
![MUI v5 Theme ~基本の使い方からカスタマイズまで~](https://cdn-ak-scissors.b.st-hatena.com/image/square/8644d8b26ca4abbf2b3d571d44d98a8883bdab3e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--JseeFY6h--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AMUI%252520v5%252520Theme%252520%2525EF%2525BD%25259E%2525E5%25259F%2525BA%2525E6%25259C%2525AC%2525E3%252581%2525AE%2525E4%2525BD%2525BF%2525E3%252581%252584%2525E6%252596%2525B9%2525E3%252581%25258B%2525E3%252582%252589%2525E3%252582%2525AB%2525E3%252582%2525B9%2525E3%252582%2525BF%2525E3%252583%25259E%2525E3%252582%2525A4%2525E3%252582%2525BA%2525E3%252581%2525BE%2525E3%252581%2525A7%2525EF%2525BD%25259E%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Apiyoko%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2FlYjQwNDk5NTIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)