[ PROMPT_NODE_24808 ]
样式指南
[ SKILL_DOCUMENTATION ]
# 样式指南
使用 MUI v7 sx 属性、内联样式和主题集成的现代样式模式。
---
## 内联样式 vs 独立样式文件
### 决策阈值
**<100 行：在组件顶部使用内联样式**
typescript
import type { SxProps, Theme } from '@mui/material';
const componentStyles: Record<string, SxProps> = {
container: {
p: 2,
display: 'flex',
flexDirection: 'column',
},
header: {
mb: 2,
borderBottom: '1px solid',
borderColor: 'divider',
},
// ... 更多样式
};
export const MyComponent: React.FC = () => {
return (
Title
);
};
**>100 行：使用独立的 `.styles.ts` 文件**
typescript
// MyComponent.styles.ts
import type { SxProps, Theme } from '@mui/material';
export const componentStyles: Record<string, SxProps> = {
container: { ... },
header: { ... },
// ... 100+ 行样式
};
// MyComponent.tsx
import { componentStyles } from './MyComponent.styles';
export const MyComponent: React.FC = () => {
return ...;
};
### 实际示例：UnifiedForm.tsx
**第 48-126 行**：78 行内联样式（可接受）
typescript
const formStyles: Record<string, SxProps> = {
gridContainer: {
height: '100%',
maxHeight: 'calc(100vh - 220px)',
},
section: {
height: '100%',
maxHeight: 'calc(100vh - 220px)',
overflow: 'auto',
p: 4,
},
// ... 15 个样式对象
};
**准则**：用户对约 80 行的内联样式感到舒适。在 100 行左右请自行判断。
---
## sx 属性模式
### 基本用法
typescript
内容
### 访问主题
typescript
theme.palette.primary.main,
color: (theme) => theme.palette.primary.contrastText,
borderRadius: (theme) => theme.shape.borderRadius,
}}
>
主题化 Box
### 响应式样式
typescript
响应式布局
### 伪类选择器
typescript
<Box
sx={{
p: 2,
'&:ho
粤公网安备44030002003366号