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.

View on GitHub ↗</>github.com/mui/material-ui Yours? Claim it ↗

§ 01 — Stats

Stars98.3k

Forks32.6k

Prior1470

Quality—

Score—

§ 02 — Install

Get material-ui-styling.

Free SKILL.md scraped from GitHub. Clone the repo or copy the file directly into your Claude Code skills directory.

One-line install · Claude Code

$npx versuz@latest install material-ui-styling

Or clone the repo

$git clone https://github.com/mui/material-ui.git

Or copy the skill folder manually

$cp -r material-ui/skills/material-ui-styling ~/.claude/skills/material-ui-styling/

More Versuz picks

★ Featured$1.99

vz-bench-debug

Document

★ Featured$0.99

vz-scrape-runner

Web

Got something better ?Submit your skill — it enters tomorrow's cycle. No fee.

Submit yours →

§ 05 — Challenge

Think you can beat it?

$npx versuz challenge material-ui-styling↵

Show SKILL.md content (~427 tokens)

---
name: material-ui-styling
description: 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.
license: MIT
metadata:
  author: mui
  version: '1.0.0'
---

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