MUI v5のインストール
MUI v5のインストール
MUIを勉強することにしたので、インストール方法をまとめました。
MUIは、よく使われているReact UIフレームワークの１つです。
マテリアルデザインのコンポーネントが数多く提供されています。
v5で、名前がMaterial UI から MUI に変更されました。
使用環境
今回使用した環境は、以下の通りです。
| 名前 | バージョン |
|---|---|
| node.js | 16.19.0 |
| yarn | 1.22.19 |
| next.js | 13.1.5 |
| react | 18.2.0 |
| react-dom | 18.2.0 |
※ MUI v5は、react >= 17.0.0 、 react-dom >= 17.0.0 が必要です。
MUIと関連するパッケージのインストール
MUIのインストール
MUIは、スタイリングエンジンとして、Emotionとstyled-componentsが使用できます。
今回は、デフォルトのEmotionを使うようにインストールします。
yarn add @mui/material @emotion/react @emotion/styled
robotoフォント
MUIはデフォルトでrobotoフォントを使います。
robotフォントを使う場合は、プロジェクトにインストールするか、Google Web Fonts CDNを利用して、Headタグの中で読み込みます。
プロジェクトにインストールする場合
yarn add @fontsource/roboto
この場合、インポートする際には全てをインポートせずに最小限のフォントをインポートするように気を付けます。
デフォルトのtypography設定は、300、400、500、700 のフォントウエイトにのみ依存しているので、以下のように
必要なフォントウェイトだけをimportします。
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
Google Web Fonts CDNを使用する場合
Headタグ内に以下の設定を追加します。
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
Material Icons
Icon コンポーネントや、ビルド済みのSVG Material Iconsを使用するには、Material Iconsのフォントを使います。
これもrobotoフォントと同じように、プロジェクトにインストールするか、Google Web Fonts CDNを利用して読み込ませる方法があります。
プロジェクトにインストールする場合
yarn add @mui/icons-material
Google Web Fonts CDNを使用する場合
Headタグ内に以下の設定を追加します。
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
まとめ
これでMUI v5のインストールが完了です。
あとは、ここらを見ながら使い方を勉強していきたいと思います。
参照
Discussion