Back to Material Ui

Material UI styling

skills/material-ui-styling/SKILL.md

9.0.11.2 KB
Original Source

Material UI styling

Agent skill for picking the correct styling layer in Material UI (narrowest scope first). SKILL.md is the entry and index; AGENTS.md is the full guide.

When to apply

  • Choosing among sx, styled(), theme components, or global CSS for a change
  • Overriding component slots or state safely
  • Comparing sx vs styled() semantics (spacing, theme shortcuts)

Sections in AGENTS.md (by priority)

OrderTopicScope
1Quick decisionPick sxstyled → theme → global
2sx propOne-off / local
3styled()Reusable wrapper
4createTheme({ components })All instances
5GlobalStyles / CssBaselineHTML baseline / globals
6sx vs styled() tableFoot-gun prevention

Full guide

Read AGENTS.md for the complete instructions, examples, and doc links.

Supplementary tables: reference.md.