# Material UI Styling

> Chooses the right Material UI styling approach (sx, styled, theme overrides, global CSS) from official MUI guidance. Use when styling @mui/material components, customizing themes, overriding slots, or comparing sx vs styled.

- Skill: `mui/material-ui-styling` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add mui/material-ui-styling`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mui/material-ui-styling/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: mui (https://skillmd.com/u/mui)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/mui/material-ui-styling

---


# 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)

| Order | Topic                          | Scope                                 |
| :---- | :----------------------------- | :------------------------------------ |
| 1     | Quick decision                 | Pick `sx` → `styled` → theme → global |
| 2     | `sx` prop                      | One-off / local                       |
| 3     | `styled()`                     | Reusable wrapper                      |
| 4     | `createTheme({ components })`  | All instances                         |
| 5     | `GlobalStyles` / `CssBaseline` | HTML baseline / globals               |
| 6     | `sx` vs `styled()` table       | Foot-gun prevention                   |

## Full guide

Read [AGENTS.md](./AGENTS.md) for the complete instructions, examples, and doc links.

Supplementary tables: [reference.md](./reference.md).