Mui

MUI v7 Patterns

Purpose

Material-UI v7 (released March 2025) patterns for component usage, styling with sx prop, theme integration, and responsive design.

Note: MUI v7 breaking changes from v6:

• Deep imports no longer work - use package exports field
• onBackdropClick removed from Modal - use onClose instead
• All components now use standardized slots and slotProps pattern
• CSS layers support via enableCssLayer config (works with Tailwind v4)

When to Use This Skill

• Styling components with MUI sx prop
• Using MUI components (Box, Grid, Paper, Typography, etc.)
• Theme customization and usage
• Responsive design with MUI breakpoints
• MUI-specific utilities and hooks

---

Quick Start

Basic MUI Component

import { Box, Typography, Button, Paper } from '@mui/material';
import type { SxProps, Theme } from '@mui/material';

const styles: Record> = {
  container: {
    p: 2,
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  header: {
    mb: 3,
    fontSize: '1.5rem',
    fontWeight: 600,
  },
};

function MyComponent() {
  return (
    
      
        Title
      
      
        Action
      
    
  );
}

---

Styling Patterns

Inline Styles (> = {

container: { p: 2, display: 'flex', flexDirection: 'column', }, header: { mb: 2, color: 'primary.main', }, button: { mt: 'auto', alignSelf: 'flex-end', }, };

function Component() { return (

Header Action

); }

### Separate Styles File (>= 100 lines)

For complex components, create separate style file:

```typescript
// UserProfile.styles.ts
import type { SxProps, Theme } from '@mui/material';

export const userProfileStyles: Record> = {
  container: {
    p: 3,
    maxWidth: 800,
    mx: 'auto',
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    mb: 3,
  },
  // ... many more styles
};

// UserProfile.tsx
import { userProfileStyles as styles } from './UserProfile.styles';

function UserProfile() {
  return ...;
}

---

Common Components

Layout Components

// Box - Generic container

  Content

// Paper - Elevated surface

  Content

// Container - Centered content with max-width

  Content

// Stack - Flex container with spacing

  
  

Grid System

import { Grid } from '@mui/material';

// 12-column grid

  
    Left half
  
  
    Right half
  

// Responsive grid

  
    Card
  
  {/* Repeat for more cards */}

Typography

Heading 1
Heading 2
Body text
Small text

// With custom styling

  Custom Heading

Buttons

// Variants
Contained
Outlined
Text

// Colors
Primary
Secondary
Error

// With icons
import { Add as AddIcon } from '@mui/icons-material';

}>Add Item

---

Theme Integration

Using Theme Values

import { useTheme } from '@mui/material';

function Component() {
  const theme = useTheme();

  return (
    
      Themed box
    
  );
}

Theme in sx Prop

  Content

// Callback for advanced usage
 ({
    color: theme.palette.primary.main,
    '&:hover': {
      color: theme.palette.primary.dark,
    },
  })}
>
  Hover me

---

Responsive Design

Breakpoints

// Mobile-first responsive values

  Responsive width

// Responsive display

  Desktop only

Responsive Typography

  Responsive text

---

Forms

import { TextField, Stack, Button } from '@mui/material';

  
     setEmail(e.target.value)}
      fullWidth
      required
      error={!!errors.email}
      helperText={errors.email}
    />
    Submit
  

---

Common Patterns

Card Component

import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';

  
    
      Title
    
    
      Description
    
  
  
    Learn More
  

Dialog/Modal

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';

  Confirm Action
  
    Are you sure you want to proceed?
  
  
    Cancel
    
      Confirm
    
  

Loading States

import { CircularProgress, Skeleton } from '@mui/material';

// Spinner

  

// Skeleton

  
  
  

---

MUI-Specific Hooks

useMuiSnackbar

import { useMuiSnackbar } from '@/hooks/useMuiSnackbar';

function Component() {
  const { showSuccess, showError, showInfo } = useMuiSnackbar();

  const handleSave = async () => {
    try {
      await saveData();
      showSuccess('Saved successfully');
    } catch (error) {
      showError('Failed to save');
    }
  };

  return Save;
}

---

Icons

import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
import { Button, IconButton } from '@mui/material';

}>Add

---

Best Practices

1. Type Your sx Props

import type { SxProps, Theme } from '@mui/material';

// ✅ Good
const styles: Record> = {
  container: { p: 2 },
};

// ❌ Avoid
const styles = {
  container: { p: 2 }, // No type safety
};

2. Use Theme Tokens

// ✅ Good: Use theme tokens

// ❌ Avoid: Hardcoded values

3. Consistent Spacing

// ✅ Good: Use spacing scale

// ❌ Avoid: Random pixel values

---

Additional Resources

For more detailed patterns, see:

• [styling-guide.md](resources/styling-guide.md) - Advanced styling patterns
• [component-library.md](resources/component-library.md) - Component examples
• [theme-customization.md](resources/theme-customization.md) - Theme setup

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: softaworks
• Source: softaworks/agent-toolkit
• License: MIT

Install and usage instructions live in the source repository linked above.