[ PROMPT_NODE_24984 ]
styling-guide
[ SKILL_DOCUMENTATION ]
# MUI 样式指南
## sx 属性
`sx` 属性是 MUI v7+ 中的主要样式方法：
typescript
## 主题感知值
typescript
// 间距 (乘以 theme.spacing，默认为 8px)
sx={{ p: 2 }} // padding: 16px
// 来自调色板的颜色
sx={{ bgcolor: 'primary.main', color: 'text.secondary' }}
// 断点
sx={{
width: { xs: '100%', sm: '50%', md: '33%' }
}}
// 排版变体
sx={{ typography: 'h4' }} // 应用 theme.typography.h4
## 响应式样式
typescript
## 伪类选择器和嵌套样式
typescript
## 动态样式
typescript
interface CardProps {
isActive: boolean;
priority: 'low' | 'medium' | 'high';
}
function Card({ isActive, priority }: CardProps) {
return (
);
}
## 使用 GlobalStyles 设置全局样式
typescript
import { GlobalStyles } from '@mui/material';
## Styled Components API
用于可复用的样式化组件：
typescript
import { styled } from '@mui/material/styles';
const StyledCard = styled(Card)(({ theme }) => ({
padding: theme.spacing(2),
borderRadius: theme.shape.borderRadius * 2,
backgroundColor: theme.palette.background.paper,
transition: theme.transitions.create(['transform', 'box-shadow']),
'&:hover': {
transform: 'translateY(-4px)',
boxShadow: theme.shadows[8]
}
}));
// 带属性
interface StyledButtonProps {
variant: '
粤公网安备44030002003366号