mui

1# MUI v7 Patterns
2 
3## Purpose
4 
5Material-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.
6 
7**Note**: MUI v7 breaking changes from v6:
8- Deep imports no longer work - use package exports field
9- `onBackdropClick` removed from Modal - use `onClose` instead
10- All components now use standardized `slots` and `slotProps` pattern
11- CSS layers support via `enableCssLayer` config (works with Tailwind v4)
12 
13## When to Use This Skill
14 
15- Styling components with MUI sx prop
16- Using MUI components (Box, Grid, Paper, Typography, etc.)
17- Theme customization and usage
18- Responsive design with MUI breakpoints
19- MUI-specific utilities and hooks
20 
21---
22 
23## Quick Start
24 
25### Basic MUI Component
26 
27```typescript
28import { Box, Typography, Button, Paper } from '@mui/material';
29import type { SxProps, Theme } from '@mui/material';
30 
31const styles: Record<string, SxProps<Theme>> = {
32  container: {
33    p: 2,
34    display: 'flex',
35    flexDirection: 'column',
36    gap: 2,
37  },
38  header: {
39    mb: 3,
40    fontSize: '1.5rem',
41    fontWeight: 600,
42  },
43};
44 
45function MyComponent() {
46  return (
47    <Paper sx={styles.container}>
48      <Typography sx={styles.header}>
49        Title
50      </Typography>
51      <Button variant="contained">
52        Action
53      </Button>
54    </Paper>
55  );
56}
57```
58 
59---
60 
61## Styling Patterns
62 
63### Inline Styles (< 100 lines)
64 
65For components with simple styling, define styles at the top:
66 
67```typescript
68…