Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.

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 Styling Patterns Inline Styles (< 100 lines) For components with simple styling, define styles at the top: Separate Styles File ( = 100 lines) For complex components, create separate style file: Common Components Layout Components Grid System Typography Buttons Theme Integration Using Theme Values Theme in sx Prop Responsive Design Breakpoints Responsive Typography Forms Common Patterns Card Component Dialog/Modal Loading States MUI Specific Hooks useMuiSnackbar Icons Best Practices 1. Type Your sx Props 2. Use Theme Tokens 3. Consistent Spacing 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

mui