MUI (Material UI) Patterns

Quick Guide: MUI provides pre-styled React components implementing Material Design. Use createTheme + ThemeProvider for global theming, sx prop for one-off styles, styled() for reusable styled components, and slots/slotProps for deep component customization. Prefer path imports in development for faster builds. Current: v7.x (March 2025) -- CSS layers support, standardized slot pattern, Grid v2 promoted, React 19 compatible. MUI X v8 for DataGrid, DatePicker, Charts.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST wrap the app in ThemeProvider with a createTheme() instance -- never use MUI components without a theme)

(You MUST use path imports (@mui/material/Button) in development for faster startup -- barrel imports (@mui/material) cause 6x slower dev builds)

(You MUST use slots/slotProps for component inner-element customization -- componentsProps is deprecated in v7)

(You MUST use theme.applyStyles('dark', {...}) for dark mode conditional styles -- never use theme.palette.mode === 'dark' which causes flickering)