MUI (Material UI) Patterns

Quick Guide: MUI is a pre-styled React component library built on a theme. createTheme + ThemeProvider define the tokens every component reads; sx styles one instance, styled() makes a reusable one, theme.components changes every instance, and slots / slotProps reach inner elements. Current: v7.x (March 2025) — CSS layers, slots/slotProps standardised everywhere, Grid v2 promoted to Grid, React 19 compatible. MUI X v8 covers DataGrid, DatePicker and Charts. Emotion is the styling engine; Pigment CSS is still alpha and on hold.

Detailed Resources:

• examples/core.md — theme with colour schemes, component overrides, dark-mode menu, TypeScript augmentation, SSR and SPA setup with CSS layers
• examples/styling.md — styled(), custom props via shouldForwardProp, sx theme-aware, responsive and callback forms
• examples/form-inputs.md — TextField, Select, Autocomplete, slots and slotProps
• examples/layout.md — Grid, Stack, Box, Container, responsive card grid
• examples/navigation.md — AppBar, Drawer, Tabs, responsive dashboard shell
• examples/feedback.md — Dialog, Snackbar, Alert, Skeleton, CircularProgress
• examples/data-grid.md — DataGrid columns, pagination, cell rendering
• reference.md — component tables, theme structure, sx shorthands, breakpoints, package list, v6 → v7 migration, anti-pattern code