Applies when building or reviewing Material UI (MUI) components. Covers sx prop, theming, component composition, responsive design, and accessibility.
sx prop for one-off styles. Access theme values directly: sx={{ p: 2, color: 'primary.main' }}. Avoid inline style prop.styled() for reusable styled components. Use when the same styles appear in multiple places.sx objects in render. Memoize with useMemo or define outside the component for dynamic styles.theme.spacing(2) = 16px (default). Use numeric shorthand in sx: p: 2, m: 1.createTheme + ThemeProvider at app root. Customize palette, typography, shape, breakpoints, component defaults.components.MuiButton.defaultPropsstyleOverridestheme.palette.mode for dark mode. Toggle between 'light' and 'dark' via context.sx={{ width: { xs: '100%', md: '50%' } }}.aria-label on icon buttons. <IconButton aria-label="delete">.role and aria-* props from MUI's API rather than raw HTML attributes.import Button from '@mui/material/Button'.