Material Ui Styling
Published by mui in material-ui
What this skill does
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.
Add Material Ui Styling to your agent
Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.
Install with a prompt
Paste this into a compatible coding agent:
add this skill "material-ui-styling" from https://github.com/mui/material-uiInstall with the CLI
Run this command in a controlled environment after reviewing the repository:
npx skills add https://github.com/mui/material-ui --skill material-ui-stylingSkill instructions
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(), themecomponents, or global CSS for a change - Overriding component slots or state safely
- Comparing
sxvsstyled()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 for the complete instructions, examples, and doc links.
Supplementary tables: reference.md.
Files included
- SKILL.md
- README.md
- metadata.json
- reference.md
- AGENTS.md