---
description: Styling conventions for React components. Covers sx prop usage, color tokens, spacing, composeSx, margins, and date formatting.
paths:
  - "src/**/*.tsx"
---

# React Styling Conventions

Rules for styling React components in Humand projects.

---

## 1. General

- Try to always use **material-hu** design-system and composed-components by default.
- Use **`sx`** prop, not `style`.
- Use **`Stack`** with `sx={{ gap: n }}`; avoid `Box`/`Container` unless needed.
- Avoid using styling props (`flexDirection="row"`, etc.). Use `sx` instead.
- Don't wrap components only for styles; use `sx` directly.

---

## 2. Colors

**Always use `theme.palette.new.*` tokens** via `useTheme()` from `@material-hu/mui/styles`. Never use hex values, CSS color names, or any other color source.

Do not assign sub-objects to intermediate variables — always write the full path inline:

```tsx
// NO
const neutral = theme.palette.new.text.neutral;
sx={{ color: neutral.default }}

// YES
const { palette } = useTheme();
sx={{ color: palette.new.text.neutral.default }}
```

---

## 3. Spacing

Always use **unitless values** in `sx` (MUI theme spacing). Never hardcode `px`, `rem`, or `em` values for spacing.

Use compact keys (`mb`, `mt`, `px`, `py`, etc.):

```tsx
// NO
sx={{ marginBottom: '16px', padding: '8px 24px' }}

// YES
sx={{ mb: 2, px: 3, py: 1 }}
```

---

## 4. Extending `sx`

When a component accepts `sx` from outside, merge with **`composeSx`** so specificity is correct:

```tsx
sx={composeSx(componentStyles, sx)}
```

---

## 5. Margins from the caller

Apply margins at the call site, not inside the component. The component accepts `sx` and forwards it via `composeSx`; the parent passes e.g. `sx={{ mt: 2 }}`.

```tsx
// NO — margin inside component
const Component1 = () => <Stack sx={{ gap: 1, mt: 2 }}>{...}</Stack>;

// YES — component accepts sx, parent passes margin
const Component1 = ({ sx }) => (
  <Stack sx={composeSx({ gap: 1 }, sx)}>{...}</Stack>
);
const Parent = () => <Component1 sx={{ mt: 2 }} />;
```

---

## 6. Dates

In components: use **`useFormatDate()`** hook.
