Login
mui/material-uiMIT5 files

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.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
mui/material-ui/material-ui-styling
Publisher
mui
Repository
material-ui
Installs
0
Files
5
License
MIT
Synced
Sep 23, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

mui/material-ui/material-ui-stylingInstalls these files
  • AGENTS.md
  • README.md
  • SKILL.md
  • metadata.json
  • reference.md

What this skill tells the agent

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 sx → styled → 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.

More from mui

mui/material-ui

Material UI Nextjs

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.

mui/material-ui

Material UI Theming

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.

Use this skill in a project

Open any RiverX project, search the Skills panel for mui/material-ui/material-ui-styling, and install it in one click.

Use this skill