でじぼうです。
Reactでアプリを作っていると「もっと見た目を整えたい」「CSSがむずかしい」と感じたこと、ありませんか？そんなときに活躍するのが、MUI というライブラリです！
でじぼう
この記事は下記の方がおすすめ！
- MUIとは何か？
- おしゃれなボタンやフォームをすぐ使いたい
- ReactでUIを作っているけど、CSSが苦手
Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち
MUIとは？
MUIとはReact専用のUIライブラリです。
かんたんに言うと、Reactで使える「見た目が整ったパーツ（部品）」を集めたツール集です。
例
- ボタン
- 入力欄
- ダイアログ（ポップアップ）
- ナビゲーションバー
などが、すでに整った見た目で提供されており、自分でCSSを書かなくてもキレイな画面が作れるのが特徴です。
MUIのインストール方法
MUIを利用するためには、UIコンポーネントライブラリをインストールしなければいけません。
以下のコマンドを実行します。
npm install @mui/material @emotion/react @emotion/styled@mui/material：見た目の部品である、UIコンポーネントを提供するライブラリ
@emotion/react：部品にスタイルを反映させるライブラリ
@emotion/styled：自分で部品のスタイルを定義するライブラリ
実際のコード
下記の、統一感のあるフォームデザインを自分でCSSで整えるのは、意外と手間がかかります。
その点、MUIを使えばスタイルがあらかじめ用意されているため、見た目の整ったフォームを素早く実装することができます。
送信ボタンを押下するとモーダル表示される
import {
AppBar, // 画面上部に固定されるヘッダー
Toolbar, // ヘッダーの中の横並びレイアウト用
Typography, // 見出しや本文などのテキスト表示
Container, // 中央寄せ＆余白ありの全体レイアウト枠
TextField, // 入力フォーム（名前・メールなど）
Button, // 押せるボタン（送信・閉じるなど）
Grid, // 要素を縦や横に並べるレイアウト
Card, // 情報を囲って見せるパネル（カード）
CardContent, // カード内に配置する中身
Box, // スタイル調整や余白をつけるための箱
Paper, // 白背景＋影のついたパネル
Dialog, // ポップアップウィンドウ（モーダル）
DialogTitle, // モーダルのタイトル部分
DialogContent, // モーダルの本文部分
DialogActions // モーダルのボタン部分（閉じるなど）
} from "@mui/material";
import { useState } from "react";
function ContactForm() {
const [open, setOpen] = useState(false);
return (
<>
{/* AppBar：上部ナビゲーション */}
<AppBar position="static">
<Toolbar>
<Typography variant="h6">ABC会社 - お問い合わせ</Typography>
</Toolbar>
</AppBar>
{/* Container：中央レイアウト */}
<Container maxWidth="sm" sx={{ mt: 4 }}>
{/* Box：フォーム全体の囲み */}
<Box component={Paper} elevation={3} p={4}>
<Typography variant="h5" gutterBottom>
お問い合わせフォーム
</Typography>
{/* Grid：縦並びレイアウト */}
<Grid container spacing={2} direction="column">
{/* 名前入力 */}
<Grid item>
<TextField label="お名前" fullWidth variant="outlined" />
</Grid>
{/* メールアドレス入力 */}
<Grid item>
<TextField label="メールアドレス" fullWidth variant="outlined" />
</Grid>
{/* 件名 */}
<Grid item>
<TextField label="件名" fullWidth variant="outlined" />
</Grid>
{/* 内容 */}
<Grid item>
<TextField
label="お問い合わせ内容"
fullWidth
multiline
rows={4}
variant="outlined"
/>
</Grid>
{/* 送信ボタン */}
<Grid item>
<Button
variant="contained"
color="primary"
fullWidth
onClick={() => setOpen(true)}
>
送信する
</Button>
</Grid>
</Grid>
</Box>
{/* Card：会社案内パネル */}
<Box mt={4}>
<Card>
<CardContent>
<Typography variant="h6">ABC会社について</Typography>
<Typography variant="body2" color="text.secondary">
〒100-0001 東京都中央区サンプル1-2-3 営業時間：平日 9:00〜18:00
電話：03-1234-5678
</Typography>
</CardContent>
</Card>
</Box>
</Container>
{/* Dialog：送信後モーダル */}
<Dialog open={open} onClose={() => setOpen(false)}>
<DialogTitle>送信完了</DialogTitle>
<DialogContent>
<Typography>
お問い合わせありがとうございました。ABC会社より折り返しご連絡いたします。
</Typography>
</DialogContent>
<DialogActions>
<Button onClick={() => setOpen(false)} autoFocus>
閉じる
</Button>
</DialogActions>
</Dialog>
</>
);
}
export default ContactForm;
こんなときにMUIはおすすめ！
- デザインの統一感がほしいとき
- 手早く開発を進めたいとき
- チーム開発で見た目を揃えたいとき
- バリデーション付きのフォームなど、複雑なUIを早く実装したいとき
注意点・デメリット
- クラス名で直接装飾しにくく、カスタマイズが難しいと感じることがある
- 内部でEmotion（CSS-in-JS）を使っているため、CSSの書き方が普通と少し違う
◆ 普通のCSSの書き方
/* style.css */
.button {
background-color: red;
}◆ Emotion（CSS-in-JS）を使った書き方（MUIの場合）
import { styled } from '@mui/material/styles';
const CustomButton = styled('button')({
backgroundColor: 'red',
});
コメント