| name | foundation-mui-utils |
| description | Foundation 项目 MUI 9 工具类组件用法文档。覆盖 Modal / Popover / Popper / Portal / ClickAwayListener / CssBaseline / Transitions / useMediaQuery / NoSsr / TextareaAutosize / GlobalStyles。遵循 Foundation 配色、圆角、图标、i18n、样式工厂铁律。 |
Foundation × MUI 9 工具类组件
本 SKILL 覆盖 MUI 9 中工具类 / 底层组件在 Foundation 项目中的规范用法。
覆盖组件一览
Foundation 铁律速查
| # | 铁律 | 要点 |
|---|
| 1 | 配色 | 只从 theme.palette.foundation.* 取值 |
| 2 | 圆角 | 弹出层容器 borderRadius: 2（即 8px） |
| 3 | 图标 | 只用 *Rounded 系列 |
| 4 | i18n | 所有文案走 t('key') |
| 5 | 样式 | styles.ts 工厂函数，禁止内联复杂 sx |
| 6 | 对话框 | 简单确认走 NativeDialogs；Modal 仅用于需要自定义 UI 的复杂弹层 |
快速选型指南
| 需求 | 推荐组件 |
|---|
| 简单确认/警告 | NativeDialogs（不用 Modal） |
| 复杂表单弹层 | Dialog（基于 Modal） |
| 点击按钮弹出菜单/信息 | Popover |
| Tooltip 式轻量提示 | Popper + ClickAwayListener |
| 下拉选项定位 | Popper（不阻塞滚动） |
| 渲染到 body 外 | Portal |
| 响应式布局判断 | useMediaQuery |
| 进入/退出动画 | Fade / Grow / Slide / Zoom / Collapse |
| 列表展开收起 | Collapse |
简述组件（无独立参考文档）
NoSsr
跳过服务端渲染，仅在客户端挂载子节点。Foundation 为纯桌面应用（Wails），一般不需要此组件。
import NoSsr from '@mui/material/NoSsr';
<NoSsr>
<HeavyComponent />
</NoSsr>
TextareaAutosize
自动根据内容调整高度的原生 textarea。Foundation 中推荐直接用 TextField multiline（内部已集成）。
import { TextareaAutosize } from '@mui/material';
<TextareaAutosize
minRows={3}
maxRows={10}
placeholder={t('form.placeholder')}
style={{ width: '100%' }}
/>
GlobalStyles
向文档注入全局 CSS。Foundation 中优先使用主题 styleOverrides，仅在无法通过主题覆盖时使用。
import GlobalStyles from '@mui/material/GlobalStyles';
<GlobalStyles styles={(theme) => ({
'#root': {
backgroundColor: theme.palette.foundation.bg.base,
},
})} />
参考文档索引
