🐈‍⬛

MUI v5のインストール

2023/01/25に公開約1,800字

MUI v5のインストール

MUIを勉強することにしたので、インストール方法をまとめました。

MUIは、よく使われているReact UIフレームワークの1つです。
マテリアルデザインのコンポーネントが数多く提供されています。

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タグ内に以下の設定を追加します。

javascript
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

まとめ

これでMUI v5のインストールが完了です。

あとは、ここらを見ながら使い方を勉強していきたいと思います。

https://mui.com/material-ui/getting-started/learn/

参照

https://mui.com/material-ui/getting-started/installation/

Discussion

ログインするとコメントできます