MUIとは？ReactでおしゃれなUIがすぐ作れるライブラリを解説！

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;

/* style.css */
.button {
  background-color: red;
}

import { styled } from '@mui/material/styles';

const CustomButton = styled('button')({
  backgroundColor: 'red',
});