mui-stylinglisted

# MUI Styling Skill Material-UI styling standards and best practices. ## When to Apply - Creating styled components - Implementing responsive design - Theme customization - UI consistency review --- ## Styling Approach Priority | Priority | Approach | Use When | |----------|----------|----------| | 1st | `sx` prop | Most styling needs | | 2nd | `styled()` API | Reusable styled components | | 3rd | Theme overrides | Global component defaults | | Avoid | Inline CSS / CSS files | Never use in MUI projects | --- ## Spacing System ### Spacing Scale | Value | Pixels | Usage | |-------|--------|-------| | 0.5 | 4px | Tight spacing | | 1 | 8px | Default small | | 2 | 16px | Default medium | | 3 | 24px | Section spacing | | 4 | 32px | Large spacing | ### Spacing Props | Prop | CSS Property | |------|--------------| | `m` | margin | | `p` | padding | | `mt`, `mr`, `mb`, `ml` | margin-top/right/bottom/left | | `pt`, `pr`, `pb`, `pl` | padding-top/right/bottom/left | | `mx`, `my` | margin x/y axis | | `px`, `py` | padding x/y axis | | `gap` | flex/grid gap | --- ## Color System ### Theme Colors | Category | Values | |----------|--------| | Primary | `primary.main`, `primary.light`, `primary.dark`, `primary.contrastText` | | Secondary | `secondary.main`, `secondary.light`, `secondary.dark` | | Status | `error.main`, `warning.main`, `info.main`, `success.main` | | Grey | `grey.100` through `grey.900` | | Background | `background.default`, `background.paper` | | Text | `text.pr