MUI v7 Patterns Purpose

Material-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.

Note: MUI v7 breaking changes from v6:

Deep imports no longer work - use package exports field onBackdropClick removed from Modal - use onClose instead All components now use standardized slots and slotProps pattern CSS layers support via enableCssLayer config (works with Tailwind v4) When to Use This Skill Styling components with MUI sx prop Using MUI components (Box, Grid, Paper, Typography, etc.) Theme customization and usage Responsive design with MUI breakpoints MUI-specific utilities and hooks Quick Start Basic MUI Component import { Box, Typography, Button, Paper } from '@mui/material'; import type { SxProps, Theme } from '@mui/material';

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

function MyComponent() { return ( Title ); }

Styling Patterns Inline Styles (< 100 lines)

For components with simple styling, define styles at the top:

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

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

function Component() { return ( Header ); }

Separate Styles File (>= 100 lines)

For complex components, create separate style file:

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

export const userProfileStyles: Record> = { container: { p: 3, maxWidth: 800, mx: 'auto', }, header: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3, }, // ... many more styles };

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

function UserProfile() { return ...; }

Common Components Layout Components // Box - Generic container Content

// Paper - Elevated surface Content

// Container - Centered content with max-width Content

// Stack - Flex container with spacing

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

// 12-column grid Left half Right half

// Responsive grid Card {/ Repeat for more cards /}

Typography Heading 1 Heading 2 Body text Small text

// With custom styling <Typography variant="h4" sx={{ color: 'primary.main', fontWeight: 600, mb: 2, }}

Custom Heading

Buttons // Variants

// Colors

// With icons import { Add as AddIcon } from '@mui/icons-material';

Theme Integration Using Theme Values import { useTheme } from '@mui/material';

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

return ( Themed box ); }

Theme in sx Prop <Box sx={{ // Access theme in 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

// Callback for advanced usage ({ color: theme.palette.primary.main, '&:hover': { color: theme.palette.primary.dark, }, })}

Hover me

Responsive Design Breakpoints // Mobile-first responsive values <Box sx={{ width: { xs: '100%', // 0-600px sm: '80%', // 600-900px md: '60%', // 900-1200px lg: '40%', // 1200-1536px xl: '30%', // 1536px+ }, }}

Responsive width

// Responsive display <Box sx={{ display: { xs: 'none', // Hidden on mobile md: 'block', // Visible on desktop }, }}

Desktop only

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

Responsive text

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

setEmail(e.target.value)} fullWidth required error={!!errors.email} helperText={errors.email} />

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

Title Description

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

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

// Spinner

// Skeleton

MUI-Specific Hooks 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 ; }

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

Best Practices 1. Type Your sx Props import type { SxProps, Theme } from '@mui/material';

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

// ❌ Avoid const styles = { container: { p: 2 }, // No type safety };

Use Theme Tokens // ✅ Good: Use theme tokens

// ❌ Avoid: Hardcoded values

Consistent Spacing // ✅ Good: Use spacing scale

// ❌ Avoid: Random pixel values

Additional Resources

For more detailed patterns, see:

styling-guide.md - Advanced styling patterns component-library.md - Component examples theme-customization.md - Theme setup

安装