FrontEnd

MUI Themeでカラー、シャドウ、フォントなどを設定する

投稿日:2022年1月18日 更新日:

はじめに

最近、MUIを使ったReactアプリケーションを開発しています。MUIには様々なコンポーネントがありますが、その見た目をカスタマイズする方法を調べました。

Themeとは

MUIはデフォルトでカラーやシャドウ、フォントなどが揃っていて、すぐに使い始めることができる状況となっていますが、実際には開発するサービスの ブランドに合わせて変更する必要が出てくると思います。
そうした場合に、MUIではThemeを設定することで、カラーやシャドウ、フォントなどの見た目を一括管理することができます。

Themeのセットアップ

まずは、Themeを使用できるようにします。App.tsxにThemeProviderコンポーネントを追加し、全てのUIコンポーネントをこの配下に置くようにします。今回は、テーマの変更を確認するためのコンポーネントを配置しています。

次に、theme-options.tsを追加します。

Themeの設定方法

よく使うと思われる、Pallete、Elevationのシャドウ、タイポグラフィー、そしてコンポーネントの設定方法を説明します。

Palette

コンポーネントで使用されるカラーを変更します。

colorオブジェクト

colorオブジェクトを使うと、あらかじめ用意されているパレットからカラーを変更することができます。ColorはこちらのHUEを選択します。(SHADEは指定することができず、Paletteが自動的に指定します。)

直接色を指定する

colorオブジェクトでの色指定では、main, light, dark, contrastTextを個別で指定することはできません。その場合、直接色を指定することができます。

primaryはmainしか指定していませんが、light dark contrastTextは、mainの色から計算されます。secondaryではdarkが指定されていませんが、mainの色から計算されます。
また、色の指定方法として、colorsから指定する方法と、カラーコードでの指定方法があります。MUIを使用している以上、colorsにある色から、HUEとSHADEを指定する方法がおすすめです。

contrastThresholdとtotalOffsetは必須ではありませんが、main以外の色の計算結果をカスタマイズするのに使用できます。contrastThresholdは、contrastTextの色の計算時に使用される閾値です。
totalOffsetは、0.0~1.0の間で指定し、値を大きくすればするほど、lightがより明るくなり、darkがより暗くなります。

Elevationのシャドウ

Eevationすると入るシャドウは、shadowsで設定します。shadowsは25個の配列で、0個目は必ず’none’を指定しますが、それ以外はelevationの1~25の段階ごとにshadowの設定をします。shadowは、CSSのbox-shadowの指定方法と同じです。
シャドウを完全に無くすには次のようにします。

タイポグラフィー

Font FamilyやFont Sizeを変更することができます。

fontFamily はカンマ区切りの文字列で指定しますが、可読性を上げるために配列をjoinしています。
fontSize は、MUIの各コンポーネントで使用されるフォントサイズを計算するのに使用されます。defaultは14pxですが、日本語や中国語などはフォントが大きいため、小さ目の数値にすると可読性が増すとのことです。

コンポーネント

MUIで用意されているコンポーネントごとのスタイルを上書きすることができます。

Default Props

コンポーネントのデフォルト値を指定することもできます。例えば、TextFieldコンポーネントのvariantはデフォルトでOutlinedになっていますが、アプリケーション全体でStandardを使いたい指定したい場合、次のように指定できます。

Style Overrides

コンポーネントのスタイルを上書きすることができます。

root となっている部分は、そのコンポーネントのスロットとなります。この部分はコンポーネントのDOMツリーによって異なっていて、例えばButtonであればアイコン表示時のサイズを指定できる iconSizeMedium があったりします。
他にも、Menuであれば paper というスロットがあり、こちらはMenuコンポーネントに内包されるPaperのスタイルを定義することができます。

Buttonの場合は、次のようなスロットがあります。

  • root: ルートエレメントに適用
  • text: variant=”text” かつ color=”inherit” のときに、ルートエレメントに適用
  • iconSizeMedium: size=”medium”のときに、iconエレメントに適用

MUI Theme Creator

おまけとして、便利なツールを紹介します。

MUI Theme Creator
https://bareynol.github.io/mui-theme-creator/

このツールを使用すると、MUIのテーマをプレビューしながら作ることができます。変更した内容は、ThemeOptionsのソースに反映されていくため、そのままコピペで使うことができます。

さいごに

Themeを使うと、MUIの見た目に関する設定を一括管理できることが分かりました。それでは良いMUIライフを!

おすすめ書籍

Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

もうすぐ登場!Vue 3の変更点まとめ

1 はじめに2 仕様変更2.1 複数のv-modelが定義可能に2.2 template直下に複数のタグを記述可能に2.3 開始処理がcreateAppに2.4 scoped cssの仕様変更2.5 ...

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

react-icon

React Konvaのソースコードを読む

1 はじめに2 React Konvaの大まかなアーキテクチャ3 コンポーネントがCanvas描画に変換される仕組み3.1 Stageコンポーネント3.2 StageWrap3.3 KonvaRend ...

フォロー

blog-page_side_responsive

2022年1月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。