Mui

# 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 ```typescript import { Box, Typography, Button, Paper } from '@mui/material'; import type { SxProps, Theme } from '@mui/material'; const styles: Record<string, SxProps> = { container: { p: 2, display: 'flex', flexDirection: 'column', gap: 2, }, header: { mb: 3, fontSize: '1.5rem', fontWeight: 600, }, }; function MyComponent() { return ( Title Action ); } ``` --- ## Styling Patterns ### Inline Styles (< 100 lines) For components with simple styling, define styles at the top: ```typescript import type { SxProps, Theme } from '@mui/material'; const componentStyles: Record<string, SxProps> = { container: { p: 2, display: 'flex', flexDirection: 'column', }, header: { mb: 2, color: 'primary.main', }, button: { mt: 'auto', alignSelf: 'flex-end', }, }; function Component() { return ( Header Action ); } ``` ### Separate Styles File (>= 100 lines) For complex components, create separate style file: ```typescript // UserProfile.styles.ts import type { SxProps, Theme } from '@mui/material'; export const userProfileStyles: Record<string, SxProps> = { 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 ```typescript // Box - Generic container Content // Paper - Elevated surface Content // Container - Centered content with max-width Content // Stack - Flex container with spacing ``` ### Grid System ```typescript import { Grid } from '@mui/material'; // 12-column grid Left half Right half // Responsive grid Card {/* Repeat for more cards */} ``` ### Typography ```typescript Heading 1 Heading 2 Body text Small text // With custom styling Custom Heading ``` ### Buttons ```typescript // Variants Contained Outlined Text // Colors Primary Secondary Error // With icons import { Add as AddIcon } from '@mui/icons-material'; <Button startIcon={}>Add Item ``` --- ## Theme Integration ### Using Theme Values ```typescript import { useTheme } from '@mui/material'; function Component() { const theme = useTheme(); return ( Themed box ); } ``` ### Theme in sx Prop ```typescript Content // Callback for advanced usage ({ color: theme.palette.primary.main, '&:hover': { color: theme.palette.primary.dark, }, })} > Hover me ``` --- ## Responsive Design ### Breakpoints ```typescript // Mobile-first responsive values Responsive width // Responsive display Desktop only ``` ### Responsive Typography ```typescript Responsive text ``` --- ## Forms ```typescript import { TextField, Stack, Button } from '@mui/material'; setEmail(e.target.value)} fullWidth required error={!!errors.email} helperText={errors.email} /> Submit ``` --- ## Common Patterns ### Card Component ```typescript import { Card, CardContent, CardActions, Typography, Button } from '@mui/material'; Title Description Learn More ``` ### Dialog/Modal ```typescript import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

Confirm Action Are you sure you want to proceed? Cancel Confirm

``` ### Loading States ```typescript import { CircularProgress, Skeleton } from '@mui/material'; // Spinner // Skeleton ``` --- ## MUI-Specific Hooks ### useMuiSnackbar ```typescript 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 Save; } ``` --- ## Icons ```typescript import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material'; import { Button, IconButton } from '@mui/material'; <Button startIcon={}>Add ``` --- ## Best Practices ### 1. Type Your sx Props ```typescript import type { SxProps, Theme } from '@mui/material'; // ✅ Good const styles: Record<string, SxProps> = { container: { p: 2 }, }; // ❌ Avoid const styles = { container: { p: 2 }, // No type safety }; ``` ### 2. Use Theme Tokens ```typescript // ✅ Good: Use theme tokens // ❌ Avoid: Hardcoded values ``` ### 3. Consistent Spacing ```typescript // ✅ Good: Use spacing scale // ❌ Avoid: Random pixel values ``` --- ## Additional Resources For more detailed patterns, see: - [styling-guide.md](resources/styling-guide.md) - Advanced styling patterns - [component-library.md](resources/component-library.md) - Component examples - [theme-customization.md](resources/theme-customization.md) - Theme setup