Mui

davila7/claude-code-templates/cli-tool/components/skills/development/mui

作者 davila78da17d671b6f无许可证32K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库今天更新

Material-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.

仅含说明Software Development

AI 生成的概览

提供 Material-UI v7 组件、sx 属性样式、主题集成与响应式设计的参考模式。

功能: 提供使用 Material-UI v7 构建界面的指导与代码示例，涵盖 sx 属性、主题集成、响应式断点、常用组件、表单、对话框和加载状态。它还说明 v7 相对 v6 的破坏性变更以及 MUI 专用 hook，并指向随附的样式、组件与主题定制资源文件。产出的是参考资料和示例代码片段，而非运行结果。
适用场景: 在编写或审查使用 MUI 组件的代码、用 sx 属性设置样式、定制 MUI 主题，或需要使用 MUI 响应式断点和工具时使用。从 MUI v6 迁移到 v7 并核对破坏性变更时也适用。
运行要求: 不包含脚本或运行时，仅为说明文档和 Markdown 资源。示例代码假定项目已安装 @mui/material、@mui/icons-material 及 TypeScript 类型。

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

typescript

import { Box, Typography, Button, Paper } from '@mui/material';import type { SxProps, Theme } from '@mui/material';
const styles: Record<string, SxProps<Theme>> = {  container: {    p: 2,    display: 'flex',    flexDirection: 'column',    gap: 2,  },  header: {    mb: 3,    fontSize: '1.5rem',    fontWeight: 600,  },};
function MyComponent() {  return (    <Paper sx={styles.container}>      <Typography sx={styles.header}>        Title      </Typography>      <Button variant="contained">        Action      </Button>    </Paper>  );}

import { Box, Typography, Button, Paper } from '@mui/material';import type { SxProps, Theme } from '@mui/material';
const styles: Record<string, SxProps<Theme>> = {  container: {    p: 2,    display: 'flex',    flexDirection: 'column',    gap: 2,  },  header: {    mb: 3,    fontSize: '1.5rem',    fontWeight: 600,  },};
function MyComponent() {  return (    <Paper sx={styles.container}>      <Typography sx={styles.header}>        Title      </Typography>      <Button variant="contained">        Action      </Button>    </Paper>  );}

Styling Patterns

Inline Styles (< 100 lines)

For components with simple styling, define styles at the top:

typescript

import type { SxProps, Theme } from '@mui/material';
const componentStyles: Record<string, SxProps<Theme>> = {  container: {    p: 2,    display: 'flex',    flexDirection: 'column',  },  header: {    mb: 2,    color: 'primary.main',  },  button: {    mt: 'auto',    alignSelf: 'flex-end',  },};
function Component() {  return (    <Box sx={componentStyles.container}>      <Typography sx={componentStyles.header}>Header</Typography>      <Button sx={componentStyles.button}>Action</Button>    </Box>  );}

import type { SxProps, Theme } from '@mui/material';
const componentStyles: Record<string, SxProps<Theme>> = {  container: {    p: 2,    display: 'flex',    flexDirection: 'column',  },  header: {    mb: 2,    color: 'primary.main',  },  button: {    mt: 'auto',    alignSelf: 'flex-end',  },};
function Component() {  return (    <Box sx={componentStyles.container}>      <Typography sx={componentStyles.header}>Header</Typography>      <Button sx={componentStyles.button}>Action</Button>    </Box>  );}

Separate Styles File (>= 100 lines)

For complex components, create separate style file:

typescript

// UserProfile.styles.tsimport type { SxProps, Theme } from '@mui/material';
export const userProfileStyles: Record<string, SxProps<Theme>> = {  container: {    p: 3,    maxWidth: 800,    mx: 'auto',  },  header: {    display: 'flex',    justifyContent: 'space-between',    alignItems: 'center',    mb: 3,  },  // ... many more styles};
// UserProfile.tsximport { userProfileStyles as styles } from './UserProfile.styles';
function UserProfile() {  return <Box sx={styles.container}>...</Box>;}

// UserProfile.styles.tsimport type { SxProps, Theme } from '@mui/material';
export const userProfileStyles: Record<string, SxProps<Theme>> = {  container: {    p: 3,    maxWidth: 800,    mx: 'auto',  },  header: {    display: 'flex',    justifyContent: 'space-between',    alignItems: 'center',    mb: 3,  },  // ... many more styles};
// UserProfile.tsximport { userProfileStyles as styles } from './UserProfile.styles';
function UserProfile() {  return <Box sx={styles.container}>...</Box>;}

Common Components

Layout Components

typescript

// Box - Generic container<Box sx={{ p: 2, bgcolor: 'background.paper' }}>  Content</Box>
// Paper - Elevated surface<Paper elevation={2} sx={{ p: 3 }}>  Content</Paper>
// Container - Centered content with max-width<Container maxWidth="lg">  Content</Container>
// Stack - Flex container with spacing<Stack spacing={2} direction="row">  <Item />  <Item /></Stack>

// Box - Generic container<Box sx={{ p: 2, bgcolor: 'background.paper' }}>  Content</Box>
// Paper - Elevated surface<Paper elevation={2} sx={{ p: 3 }}>  Content</Paper>
// Container - Centered content with max-width<Container maxWidth="lg">  Content</Container>
// Stack - Flex container with spacing<Stack spacing={2} direction="row">  <Item />  <Item /></Stack>

Grid System

typescript

import { Grid } from '@mui/material';
// 12-column grid<Grid container spacing={2}>  <Grid item xs={12} md={6}>    Left half  </Grid>  <Grid item xs={12} md={6}>    Right half  </Grid></Grid>
// Responsive grid<Grid container spacing={3}>  <Grid item xs={12} sm={6} md={4} lg={3}>    Card  </Grid>  {/* Repeat for more cards */}</Grid>

import { Grid } from '@mui/material';
// 12-column grid<Grid container spacing={2}>  <Grid item xs={12} md={6}>    Left half  </Grid>  <Grid item xs={12} md={6}>    Right half  </Grid></Grid>
// Responsive grid<Grid container spacing={3}>  <Grid item xs={12} sm={6} md={4} lg={3}>    Card  </Grid>  {/* Repeat for more cards */}</Grid>

Typography

typescript

<Typography variant="h1">Heading 1</Typography><Typography variant="h2">Heading 2</Typography><Typography variant="body1">Body text</Typography><Typography variant="caption">Small text</Typography>
// With custom styling<Typography  variant="h4"  sx={{    color: 'primary.main',    fontWeight: 600,    mb: 2,  }}>  Custom Heading</Typography>

<Typography variant="h1">Heading 1</Typography><Typography variant="h2">Heading 2</Typography><Typography variant="body1">Body text</Typography><Typography variant="caption">Small text</Typography>
// With custom styling<Typography  variant="h4"  sx={{    color: 'primary.main',    fontWeight: 600,    mb: 2,  }}>  Custom Heading</Typography>

Buttons

typescript

// Variants<Button variant="contained">Contained</Button><Button variant="outlined">Outlined</Button><Button variant="text">Text</Button>
// Colors<Button variant="contained" color="primary">Primary</Button><Button variant="contained" color="secondary">Secondary</Button><Button variant="contained" color="error">Error</Button>
// With iconsimport { Add as AddIcon } from '@mui/icons-material';
<Button startIcon={<AddIcon />}>Add Item</Button>

// Variants<Button variant="contained">Contained</Button><Button variant="outlined">Outlined</Button><Button variant="text">Text</Button>
// Colors<Button variant="contained" color="primary">Primary</Button><Button variant="contained" color="secondary">Secondary</Button><Button variant="contained" color="error">Error</Button>
// With iconsimport { Add as AddIcon } from '@mui/icons-material';
<Button startIcon={<AddIcon />}>Add Item</Button>

Theme Integration

Using Theme Values

typescript

import { useTheme } from '@mui/material';
function Component() {  const theme = useTheme();
  return (    <Box      sx={{        p: 2,        bgcolor: theme.palette.primary.main,        color: theme.palette.primary.contrastText,        borderRadius: theme.shape.borderRadius,      }}    >      Themed box    </Box>  );}

import { useTheme } from '@mui/material';
function Component() {  const theme = useTheme();
  return (    <Box      sx={{        p: 2,        bgcolor: theme.palette.primary.main,        color: theme.palette.primary.contrastText,        borderRadius: theme.shape.borderRadius,      }}    >      Themed box    </Box>  );}

Theme in sx Prop

typescript

<Box  sx={{    // Access theme in sx    color: 'primary.main',          // theme.palette.primary.main    bgcolor: 'background.paper',     // theme.palette.background.paper    p: 2,                            // theme.spacing(2)    borderRadius: 1,                 // theme.shape.borderRadius  }}>  Content</Box>
// Callback for advanced usage<Box  sx={(theme) => ({    color: theme.palette.primary.main,    '&:hover': {      color: theme.palette.primary.dark,    },  })}>  Hover me</Box>

<Box  sx={{    // Access theme in sx    color: 'primary.main',          // theme.palette.primary.main    bgcolor: 'background.paper',     // theme.palette.background.paper    p: 2,                            // theme.spacing(2)    borderRadius: 1,                 // theme.shape.borderRadius  }}>  Content</Box>
// Callback for advanced usage<Box  sx={(theme) => ({    color: theme.palette.primary.main,    '&:hover': {      color: theme.palette.primary.dark,    },  })}>  Hover me</Box>

Responsive Design

Breakpoints

typescript

// Mobile-first responsive values<Box  sx={{    width: {      xs: '100%',    // 0-600px      sm: '80%',     // 600-900px      md: '60%',     // 900-1200px      lg: '40%',     // 1200-1536px      xl: '30%',     // 1536px+    },  }}>  Responsive width</Box>
// Responsive display<Box  sx={{    display: {      xs: 'none',    // Hidden on mobile      md: 'block',   // Visible on desktop    },  }}>  Desktop only</Box>

// Mobile-first responsive values<Box  sx={{    width: {      xs: '100%',    // 0-600px      sm: '80%',     // 600-900px      md: '60%',     // 900-1200px      lg: '40%',     // 1200-1536px      xl: '30%',     // 1536px+    },  }}>  Responsive width</Box>
// Responsive display<Box  sx={{    display: {      xs: 'none',    // Hidden on mobile      md: 'block',   // Visible on desktop    },  }}>  Desktop only</Box>

Responsive Typography

typescript

<Typography  sx={{    fontSize: {      xs: '1rem',      md: '1.5rem',      lg: '2rem',    },    lineHeight: {      xs: 1.5,      md: 1.75,    },  }}>  Responsive text</Typography>

<Typography  sx={{    fontSize: {      xs: '1rem',      md: '1.5rem',      lg: '2rem',    },    lineHeight: {      xs: 1.5,      md: 1.75,    },  }}>  Responsive text</Typography>

Forms

typescript

import { TextField, Stack, Button } from '@mui/material';
<Box component="form" onSubmit={handleSubmit}>  <Stack spacing={2}>    <TextField      label="Email"      type="email"      value={email}      onChange={(e) => setEmail(e.target.value)}      fullWidth      required      error={!!errors.email}      helperText={errors.email}    />    <Button type="submit" variant="contained">Submit</Button>  </Stack></Box>

import { TextField, Stack, Button } from '@mui/material';
<Box component="form" onSubmit={handleSubmit}>  <Stack spacing={2}>    <TextField      label="Email"      type="email"      value={email}      onChange={(e) => setEmail(e.target.value)}      fullWidth      required      error={!!errors.email}      helperText={errors.email}    />    <Button type="submit" variant="contained">Submit</Button>  </Stack></Box>

Common Patterns

Card Component

typescript

import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';
<Card>  <CardContent>    <Typography variant="h5" component="div">      Title    </Typography>    <Typography variant="body2" color="text.secondary">      Description    </Typography>  </CardContent>  <CardActions>    <Button size="small">Learn More</Button>  </CardActions></Card>

import { Card, CardContent, CardActions, Typography, Button } from '@mui/material';
<Card>  <CardContent>    <Typography variant="h5" component="div">      Title    </Typography>    <Typography variant="body2" color="text.secondary">      Description    </Typography>  </CardContent>  <CardActions>    <Button size="small">Learn More</Button>  </CardActions></Card>

Dialog/Modal

typescript

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
<Dialog open={open} onClose={handleClose}>  <DialogTitle>Confirm Action</DialogTitle>  <DialogContent>    Are you sure you want to proceed?  </DialogContent>  <DialogActions>    <Button onClick={handleClose}>Cancel</Button>    <Button onClick={handleConfirm} variant="contained">      Confirm    </Button>  </DialogActions></Dialog>

import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';
<Dialog open={open} onClose={handleClose}>  <DialogTitle>Confirm Action</DialogTitle>  <DialogContent>    Are you sure you want to proceed?  </DialogContent>  <DialogActions>    <Button onClick={handleClose}>Cancel</Button>    <Button onClick={handleConfirm} variant="contained">      Confirm    </Button>  </DialogActions></Dialog>

Loading States

typescript

import { CircularProgress, Skeleton } from '@mui/material';
// Spinner<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>  <CircularProgress /></Box>
// Skeleton<Stack spacing={1}>  <Skeleton variant="text" width="60%" />  <Skeleton variant="rectangular" height={200} />  <Skeleton variant="text" width="40%" /></Stack>

import { CircularProgress, Skeleton } from '@mui/material';
// Spinner<Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}>  <CircularProgress /></Box>
// Skeleton<Stack spacing={1}>  <Skeleton variant="text" width="60%" />  <Skeleton variant="rectangular" height={200} />  <Skeleton variant="text" width="40%" /></Stack>

MUI-Specific Hooks

useMuiSnackbar

typescript

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 <Button onClick={handleSave}>Save</Button>;}

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 <Button onClick={handleSave}>Save</Button>;}

Icons

typescript

import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';import { Button, IconButton } from '@mui/material';
<Button startIcon={<AddIcon />}>Add</Button><IconButton onClick={handleDelete}><DeleteIcon /></IconButton>

import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';import { Button, IconButton } from '@mui/material';
<Button startIcon={<AddIcon />}>Add</Button><IconButton onClick={handleDelete}><DeleteIcon /></IconButton>

Best Practices

1. Type Your sx Props

typescript

import type { SxProps, Theme } from '@mui/material';
// ✅ Goodconst styles: Record<string, SxProps<Theme>> = {  container: { p: 2 },};
// ❌ Avoidconst styles = {  container: { p: 2 }, // No type safety};

import type { SxProps, Theme } from '@mui/material';
// ✅ Goodconst styles: Record<string, SxProps<Theme>> = {  container: { p: 2 },};
// ❌ Avoidconst styles = {  container: { p: 2 }, // No type safety};

2. Use Theme Tokens

typescript

// ✅ Good: Use theme tokens<Box sx={{ color: 'primary.main', p: 2 }} />
// ❌ Avoid: Hardcoded values<Box sx={{ color: '#1976d2', padding: '16px' }} />

// ✅ Good: Use theme tokens<Box sx={{ color: 'primary.main', p: 2 }} />
// ❌ Avoid: Hardcoded values<Box sx={{ color: '#1976d2', padding: '16px' }} />

3. Consistent Spacing

typescript

// ✅ Good: Use spacing scale<Box sx={{ p: 2, mb: 3, mt: 1 }} />
// ❌ Avoid: Random pixel values<Box sx={{ padding: '17px', marginBottom: '25px' }} />

// ✅ Good: Use spacing scale<Box sx={{ p: 2, mb: 3, mt: 1 }} />
// ❌ Avoid: Random pixel values<Box sx={{ padding: '17px', marginBottom: '25px' }} />

Additional Resources

For more detailed patterns, see:

styling-guide.md [blocked] - Advanced styling patterns
component-library.md [blocked] - Component examples
theme-customization.md [blocked] - Theme setup

来源与署名

来源：davila7/claude-code-templates位于cli-tool/components/skills/development/mui提交8da17d6

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Mui

MUI v7 Patterns

Purpose

When to Use This Skill

Quick Start

Basic MUI Component

Styling Patterns

Inline Styles (< 100 lines)

Separate Styles File (>= 100 lines)

Common Components

Layout Components

Grid System

Typography

Buttons

Theme Integration

Using Theme Values

Theme in sx Prop

Responsive Design

Breakpoints

Responsive Typography

Forms

Common Patterns

Card Component

Dialog/Modal

Loading States

MUI-Specific Hooks

useMuiSnackbar

Icons

Best Practices

1. Type Your sx Props

2. Use Theme Tokens

3. Consistent Spacing

Additional Resources

来源与署名

更多来自 davila7/claude-code-templates 的技能

React Best Practices

Web Performance Optimization

Find Bugs

Browser Automation

Code Review

Commit

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices