Scoped styling & the cascade
Set a style decision on a container and everything inside inherits it — "set high, inherit low". It's the CSS cascade, working for you.
Scope tokens
On any container, set a scope token and it cascades to all descendants:
- radius —
sharp/tight/soft/round(corner roundness). - accent — the primary/focus color (violet, emerald, rose, amber, blue, …).
- font —
sans/serif/mono. - density — compact / cozy spacing.
Put accent: violet + radius: soft on a Section and every button, input, and card inside follows — without
touching them individually. Override on a child to change just that subtree.
Per-element tokens
For a single element, use style tokens in its sx — padding (pad, pad-lg), background (bg-card,
bg-muted), rounded, shadow, text size/weight, alignment, width. These are curated, theme-aware classes,
not arbitrary CSS.
Why scoping
- Consistency for free — descendants share the decision.
- Fewer edits — restyle a whole section in one place.
- Predictable overrides — the closest container wins.
Ask the agent: "make this section's accent violet and corners soft" — it sets a scope token on the container, and the whole subtree follows.