mui-styling

# Material-UI Styling Skill

Patterns for styling Material-UI components.

## sx Prop

### Basic Usage

```tsx
import { Box, Button, Typography } from '@mui/material'

// Shorthand properties
<Box
  sx={{
    m: 2,           // margin: theme.spacing(2)
    p: 1,           // padding: theme.spacing(1)
    px: 3,          // paddingX
    py: 2,          // paddingY
    mt: 4,          // marginTop
    bgcolor: 'primary.main',
    color: 'white',
  }}
>
  Content
</Box>

// Sizing
<Box
  sx={{
    width: 1/2,     // 50%
    width: 1,       // 100%
    width: 300,     // 300px
    height: '100vh',
    minWidth: 100,
    maxWidth: 500,
  }}
/>

// Display & Flexbox
<Box
  sx={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 2,
  }}
/>
```

### Responsive Values

```tsx
<Box
  sx={{
    width: {
      xs: '100%',   // 0-600px
      sm: '50%',    // 600-900px
      md: '33%',    // 900-1200px
      lg: '25%',    // 1200-1536px
      xl: '20%',    // 1536px+
    },
    p: {
      xs: 1,
      sm: 2,
      md: 3,
    },
    display: {
      xs: 'none',
      md: 'block',
    },
  }}
/>
```

### Pseudo Selectors

```tsx
<Box
  sx={{
    '&:hover': {
      bgcolor: 'primary.light',
      cursor: 'pointer',
    },
    '&:active': {
      bgcolor: 'primary.dark',
    },
    '&:focus': {
      outline: '2px solid',
      outlineColor: 'primary.main',
    },
    '&::before': {
      content: '""',
      display: 'block',
    },
  }}
/>
```

### Nested Selectors

```tsx
<Box
  sx={{
    // Direct children
    '& > *': {
      mb: 2,
    },
    // Specific child elements
    '& .title': {
      fontWeight: 'bold',
    },
    // First/last child
    '& > *:first-of-type': {
      mt: 0,
    },
    '& > *:last-child': {
      mb: 0,
    },
  }}
/>
```

### Theme Access in sx

```tsx
<Box
  sx={(theme) => ({
    color: theme.palette.primary.main,
    [theme.breakpoints.up('md')]: {
      padding: theme.spacing(3