MUI v7 パターン

目的

Material-UI v7 (2025 年 3 月リリース) のコンポーネント使用、sx プロップによるスタイリング、テーマ統合、レスポンシブデザインのパターン。

注意: MUI v7 の v6 からの破壊的な変更:

• ディープインポートは機能しなくなりました - パッケージエクスポートフィールドを使用してください
• Modal から onBackdropClick が削除されました - 代わりに onClose を使用してください
• すべてのコンポーネントが標準化された slots と slotProps パターンを使用するようになりました
• enableCssLayer 設定による CSS レイヤサポート (Tailwind v4 と連動)

このスキルを使用する場合

• MUI sx プロップを使用したコンポーネントのスタイリング
• MUI コンポーネント (Box、Grid、Paper、Typography など) の使用
• テーマのカスタマイズと使用
• MUI ブレークポイントを使用したレスポンシブデザイン
• MUI 固有のユーティリティとフック

---

クイックスタート

基本的な MUI コンポーネント

import { Box, Typography, Button, Paper } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const styles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  header: {
    mb: 3,
    fontSize: '1.5rem',
    fontWeight: 600,
  },
};

function MyComponent() {
  return (
    <Paper sx={styles.container}>
      <Typography sx={styles.header}>
        Title
      </Typography>
      <Button variant="contained">
        Action
      </Button>
    </Paper>
  );
}

---

スタイリングパターン

インラインスタイル (< 100 行)

シンプルなスタイリングのコンポーネントの場合、スタイルを上部に定義します:

import type { SxProps, Theme } from '@mui/material';

const componentStyles: Record<string, SxProps<Theme>> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
  },
  header: {
    mb: 2,
    color: 'primary.main',
  },
  button: {
    mt: 'auto',
    alignSelf: 'flex-end',
  },
};

function Component() {
  return (
    <Box sx={componentStyles.container}>
      <Typography sx={componentStyles.header}>Header</Typography>
      <Button sx={componentStyles.button}>Action</Button>
    </Box>
  );
}

別のスタイルファイル (>= 100 行)

複雑なコンポーネントの場合、別のスタイルファイルを作成します:

// UserProfile.styles.ts
import type { SxProps, Theme } from '@mui/material';

export const userProfileStyles: Record<string, SxProps<Theme>> = {
  container: {
    p: 3,
    maxWidth: 800,
    mx: 'auto',
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    mb: 3,
  },
  // ... 他の多くのスタイル
};

// UserProfile.tsx
import { userProfileStyles as styles } from './UserProfile.styles';

function UserProfile() {
  return <Box sx={styles.container}>...</Box>;
}

---

よく使うコンポーネント

レイアウトコンポーネント

// Box - 汎用コンテナ
<Box sx={{ p: 2, bgcolor: 'background.paper' }}>
  Content
</Box>

// Paper - 高さのある表面
<Paper elevation={2} sx={{ p: 3 }}>
  Content
</Paper>

// Container - 最大幅を持つ中央寄せコンテンツ
<Container maxWidth="lg">
  Content
</Container>

// Stack - スペーシング付き Flex コンテナ
<Stack spacing={2} direction="row">
  <Item />
  <Item />
</Stack>

グリッドシステム

import { Grid } from '@mui/material';

// 12 カラムグリッド
<Grid container spacing={2}>
  <Grid item xs={12} md={6}>
    Left half
  </Grid>
  <Grid item xs={12} md={6}>
    Right half
  </Grid>
</Grid>

// レスポンシブグリッド
<Grid container spacing={3}>
  <Grid item xs={12} sm={6} md={4} lg={3}>
    Card
  </Grid>
  {/* カードを繰り返す */}
</Grid>

Typography

<Typography variant="h1">Heading 1</Typography>
<Typography variant="h2">Heading 2</Typography>
<Typography variant="body1">Body text</Typography>
<Typography variant="caption">Small text</Typography>

// カスタムスタイリング付き
<Typography
  variant="h4"
  sx={{
    color: 'primary.main',
    fontWeight: 600,
    mb: 2,
  }}
>
  Custom Heading
</Typography>

ボタン

// バリアント
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

// 色
<Button variant="contained" color="primary">Primary</Button>
<Button variant="contained" color="secondary">Secondary</Button>
<Button variant="contained" color="error">Error</Button>

// アイコン付き
import { Add as AddIcon } from '@mui/icons-material';

<Button startIcon={<AddIcon />}>Add Item</Button>

---

テーマ統合

テーム値の使用

import { useTheme } from '@mui/material';

function Component() {
  const theme = useTheme();

  return (
    <Box
      sx={{
        p: 2,
        bgcolor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        borderRadius: theme.shape.borderRadius,
      }}
    >
      Themed box
    </Box>
  );
}

sx プロップでのテーマ

<Box
  sx={{
    // sx でテーマにアクセス
    color: 'primary.main',          // theme.palette.primary.main
    bgcolor: 'background.paper',     // theme.palette.background.paper
    p: 2,                            // theme.spacing(2)
    borderRadius: 1,                 // theme.shape.borderRadius
  }}
>
  Content
</Box>

// 高度な使用法のコールバック
<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.dark,
    },
  })}
>
  Hover me
</Box>

---

レスポンシブデザイン

ブレークポイント

// モバイルファーストのレスポンシブ値
<Box
  sx={{
    width: {
      xs: '100%',    // 0-600px
      sm: '80%',     // 600-900px
      md: '60%',     // 900-1200px
      lg: '40%',     // 1200-1536px
      xl: '30%',     // 1536px+
    },
  }}
>
  Responsive width
</Box>

// レスポンシブ表示
<Box
  sx={{
    display: {
      xs: 'none',    // モバイルで非表示
      md: 'block',   // デスクトップで表示
    },
  }}
>
  Desktop only
</Box>

レスポンシブ Typography

<Typography
  sx={{
    fontSize: {
      xs: '1rem',
      md: '1.5rem',
      lg: '2rem',
    },
    lineHeight: {
      xs: 1.5,
      md: 1.75,
    },
  }}
>
  Responsive text
</Typography>

---

フォーム

import { TextField, Stack, Button } from '@mui/material';

<Box component="form" onSubmit={handleSubmit}>
  <Stack spacing={2}>
    <TextField
      label="Email"
      type="email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      fullWidth
      required
      error={!!errors.email}
      helperText={errors.email}
    />
    <Button type="submit" variant="contained">Submit</Button>
  </Stack>
</Box>

---

よく使うパターン

Card コンポーネント

import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';

<Card>
  <CardContent>
    <Typography variant="h5" component="div">
      Title
    </Typography>
    <Typography variant="body2" color="text.secondary">
      Description
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

Dialog/Modal

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

<Dialog open={open} onClose={handleClose}>
  <DialogTitle>Confirm Action</DialogTitle>
  <DialogContent>
    Are you sure you want to proceed?
  </DialogContent>
  <DialogActions>
    <Button onClick={handleClose}>Cancel</Button>
    <Button onClick={handleConfirm} variant="contained">
      Confirm
    </Button>
  </DialogActions>
</Dialog>

ローディング状態

import { CircularProgress, Skeleton } from '@mui/material';

// スピナー
<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>
  <CircularProgress />
</Box>

// スケルトン
<Stack spacing={1}>
  <Skeleton variant="text" width="60%" />
  <Skeleton variant="rectangular" height={200} />
  <Skeleton variant="text" width="40%" />
</Stack>

---

MUI 固有のフック

useMuiSnackbar

import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';

function Component() {
  const { showSuccess, showError, showInfo } = useMuiSnackbar();

  const handleSave = async () => {
    try {
      await saveData();
      showSuccess('Saved successfully');
    } catch (error) {
      showError('Failed to save');
    }
  };

  return <Button onClick={handleSave}>Save</Button>;
}

---

アイコン

import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { Button, IconButton } from '@mui/material';

<Button startIcon={<AddIcon />}>Add</Button>
<IconButton onClick={handleDelete}><DeleteIcon /></IconButton>

---

ベストプラクティス

1. sx プロップに型をつける

import type { SxProps, Theme } from '@mui/material';

// ✅ Good
const styles: Record<string, SxProps<Theme>> = {
  container: { p: 2 },
};

// ❌ Avoid
const styles = {
  container: { p: 2 }, // 型安全性がない
};

2. テーマトークンを使用

// ✅ Good: テーマトークンを使用
<Box sx={{ color: 'primary.main', p: 2 }} />

// ❌ Avoid: ハードコードされた値
<Box sx={{ color: '#1976d2', padding: '16px' }} />

3. 一貫したスペーシング

// ✅ Good: スペーシングスケールを使用
<Box sx={{ p: 2, mb: 3, mt: 1 }} />

// ❌ Avoid: ランダムなピクセル値
<Box sx={{ padding: '17px', marginBottom: '25px' }} />

---

追加リソース

より詳細なパターンについては以下を参照してください:

• styling-guide.md - 高度なスタイリングパターン
• component-library.md - コンポーネント例
• theme-customization.md - テーマセットアップ