// 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.
| 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"} |
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.
sx, styled(), theme components, or global CSS for a changesx vs styled() semantics (spacing, theme shortcuts)| 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 |
Read AGENTS.md for the complete instructions, examples, and doc links.
Supplementary tables: reference.md.
Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app.
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
Guides Material UI theming and design tokens (createTheme, ThemeProvider, palette, colorSchemes, cssVariables, theme.vars, dark mode, TypeScript augmentation). Use when building or extending a theme, toggling light/dark, or aligning tokens across an app.