ReactでMaterial UI(MUI)を使ってみよう

ReactでマテリアルUIを使ってみよう

Material UI(MUI)はフランスの会社でReactをはじめとしたUIデザインのライブラリを提供しています。日本だとユニクロがマテリアルUIを使っているようです。 このUIデザインではGoogleのマテリアルデザインというデザイン言語(テーマ)をもとに洗練されたUIを作ることができます。 今日はReactにMaterial UIをインストールして使う方法を紹介していきます。オープンソースでコードをGitHubで見ることもできます。 Reactのプロジェクトをスタート 今回はViteを使ってReactを始めます。詳しいViteの使い方はこちらの記事を参照してください。今日はReactのプロジェクトを始めるために必要なコマンドだけ紹介していきます。 react >= 17.0.0 でreact-dom >= 17.0.0 以降のバージョンを使用することが前提です。 ではcdのコマンドでReactのプロジェクトフォルダに移動して、npmを使ってライブラリをインストールします。 Material UIをインストール では下記のコマンドでMaterial UIをインストールしていきます。 Material UIはデフォルトでEmotionというスタイルエンジンを使っています。詳しい使い方は後から説明します。これでJavaScriptでCSSスタイルの記述ができるようになったとだけ理解しておきましょう。 似た方法で、styled-componentsのライブラリを使ってスタイリングを記述する方法もあります。今回は省きます。 Robotoフォントのインストール Material UIはデフォルトでRobotoフォントを使用します。 こちらもインストールしておきましょう。もしインストールではなくCDNでフォントを使用したい場合は飛ばしてください。 フォントのCSSのインポートはこのように記述しましょう。 CDNでフォントを使用したい場合 GoogleのCDNで提供されているフォントを使用したい場合は<head>タグ内に下記を記述します。 アイコン 次にマテリアルUIで使用するアイコンをインストールします。 もし、インストールではなくCDNでアイコンを表示したい場合は下記の様に<head/>タグ内にリンクを記載しましょう。 Material UIを使ってみよう では、早速テキストエディタを開いてMaterialUIのボタンを使ってみましょう。 コンポーネントのインポートはimport Button from “@mui/material/Button”;を使用してください。これで、<Button/>コンポーネントが使用できるようになりました。 実際にnpm run devのコマンドで開発用のウェブサーバーを起動するとこのようにボタンができたことが確認できます。 レスポンシブmetaタグ Material UIはモバイルファーストのコンポーネントになります。ですのでPCでスケールアップする際にCSSのMedia Queryを使ってデザインを変えるようにしていきます。 すべてのデバイスで正しくレンダリングされるように<head>タグ内に下記の行を追加しておきましょう。 例としてスライダーもコピペで使えるようになりました。 テーマカラーとスタイリング 次にCSSのカスタムの仕方を見てみます。 各コンポーネントにsxというpropsを流すことができます。これでカスタムスタイリングを設定することができます。 下記の例を見てください。 このようにsxにカスタムしたいCSSを指示していることが分かります。 更に、ThemeProviderを使うことでテーマカラーを変更することができます。これはオプショナルなのでカスタマイズしたいときには使う事もできます。 基本はこれくらいです。 … Read more