MUI Styling Skill

Material-UI styling standards and best practices.

When to Apply

• Creating styled components
• Implementing responsive design
• Theme customization
• UI consistency review

Styling Approach Priority

Spacing System

Spacing Scale

Spacing Props

Color System

Theme Colors

Color Usage Guidelines

Responsive Design

Breakpoints

Responsive Syntax

Responsive Guidelines

Layout Components

Component Selection

Flexbox with Box

Grid System

Typography Standards

Variant Usage

Typography Guidelines

Component Styling Standards

Button Styling

Card Styling

Form Styling

Anti-Patterns

Performance Guidelines

DO

• Use sx prop for one-off styles
• Use styled() for reusable styled components
• Leverage theme values for consistency
• Use responsive object syntax

DON'T

• Create inline style objects (new reference each render)
• Override theme styles unnecessarily
• Use CSS-in-JS libraries alongside MUI
• Nest sx props deeply

Accessibility Standards

Code Review Checklist

• Uses sx prop or styled(), not inline CSS
• Colors from theme palette
• Spacing from theme scale
• Responsive breakpoints applied
• No hardcoded pixel values
• Typography variants used correctly
• Accessibility standards met

Example: Centralized Theme Module (illustrative)

Illustrative — this is one team's convention shown as a concrete example. Substitute your project's own theme tokens, palette, and component-style helpers. The pattern (centralize colors/shadows/component styles in a theme module and reference tokens instead of raw values) is the reusable part; the specific neon-cyberpunk values below are just an example.

Theme: Neon Cyberpunk (Dark Mode Only)

Font: "Ubuntu" (UI), "Ubuntu Mono" (code/terminal). Theme at <your-theme-module>/index.ts.

Color Palette (<your-theme-module>/colors.ts)

colors.background.primary   // '#0D0D0D' - page background
colors.background.secondary // '#121212' - AppBar, Drawer
colors.background.surface   // '#1E1E1E' - cards, paper
colors.background.elevated  // '#252525' - hover states
colors.background.input     // '#1A1A1A' - text fields

colors.neon.cyan     // '#00FFFF' - primary actions, focus rings
colors.neon.lime     // '#39FF14' - secondary actions, success
colors.neon.red      // '#FF1744' - errors, danger
colors.neon.yellow   // '#FFEA00' - warnings
colors.neon.orange   // '#FF9100' - cancelled status
colors.neon.purple   // '#E040FB' - accents
colors.neon.green    // '#00E676' - success variant

colors.text.primary   // '#F0F0F0'
colors.text.secondary // '#888888'
colors.text.muted     // '#666666'
colors.border.primary // '#2A2A2A'

Alpha Helpers (<your-theme-module>/colors.ts)

alpha.cyan(0.08)   // hover backgrounds
alpha.cyan(0.16)   // selected backgrounds
alpha.red(0.1)     // error backgrounds
alpha.lime(0.1)    // success backgrounds

Glow Effects (<your-theme-module>/glows.ts)

glows.cyan         // '0 0 15px rgba(0,255,255,0.4)' - standard
glows.cyanLight    // '0 0 10px rgba(0,255,255,0.2)' - subtle (buttons, inputs)
glows.cyanStrong   // dual shadow for hover emphasis
glows.terminalInset// inset shadow for terminal containers
statusGlows[status]// per-TaskStatus glow effects

componentStyles (<your-theme-module>/componentStyles.ts)

Pre-built SxProps<Theme> objects. Apply via spread in sx prop:

import { componentStyles } from '../theme';

<Button sx={componentStyles.primaryButton}>Submit</Button>
<Button sx={componentStyles.dangerButton}>Delete</Button>
<IconButton sx={componentStyles.iconButtonDanger}>...</IconButton>
<TextField sx={componentStyles.textField} />
<Box sx={componentStyles.terminal}>output here</Box>
<Box sx={componentStyles.statusBadge('running')}>Running</Box>
<Alert sx={componentStyles.alertError}>Error msg</Alert>
<Typography sx={componentStyles.sectionHeader}>SECTION</Typography>

Available styles: primaryButton, secondaryButton, dangerButton, ghostButton, iconButton, iconButtonDanger, iconButtonSuccess, iconButtonPrimary, selectorButtonSidebar, selectorButtonHeader, textField, textFieldSmall, dialog, terminal, statusBadge(status), alertError, alertSuccess, dangerButtonContained, sectionHeader, menuHeader, scrollbar, alertBackendOffline, resizeHandle(isResizing), liveBadge, collapsibleSection(expanded), pulsingDot.

Animations (global keyframes in theme)

• pulse - opacity fade for running indicators
• neonPulse - scale+opacity for status dots
• neonBlink - cursor blink
• liveGlow - streaming indicator glow
• subtleBgPulse - running task row background

Usage: animation: 'liveGlow 2s ease-in-out infinite'

Example Anti-Patterns (for the theme module above)

• Do NOT use raw hex colors - use colors.* tokens
• Do NOT write inline boxShadow - use glows.* presets
• Do NOT create new button styles - use componentStyles.*Button
• Do NOT hardcode font families - use fonts.mono / fonts.monoExtended