Material UI 全量组件体系：从 Inputs 到 Utils 的组件分类图谱与工程实现解析

Material UI 的组件库按功能职责划分为 Inputs、Data display、Feedback、Surface、Navigation、Layout、Lab、Utils 共八大类别。本文以仓库中的组件总览文档为骨架，逐一梳理每类组件的完整清单与设计规范对应关系，并结合组件数据源文件与 @mui/material 包源码，说明组件分类背后的工程实现方式，帮助你在选型、查阅 API 和组织业务页面时快速定位所需组件。

文档定位与核心理念

组件总览页（docs/data/material/all-components/all-components.md）开篇给出两条关键原则：

1. Material UI 的目标是为开发者提供构建高质量用户界面的“积木”，以 Material Design 设计规范为参照，并“在切实可行的范围内尽力遵循”（strive to follow where practical）；
2. 库并不保证逐条实现每个组件/特性的官方规范——当官方指引不完整或自相矛盾时，维护者会结合常识与最新的 Web 开发标准自行决策。

这一点很重要：使用 Material UI 时不应假设其像素级复刻了 Material Design spec，遇到规范模糊地带时应以当前版本的组件实际行为和 API 文档为准。

从源码结构看，页面在路由注册于 pages.ts，路径为 /material-ui/all-components，标题为 “All components”。页面正文的八个章节均通过 {{"component": ...}} 模板指令挂载 React 组件，真正的数据来源是 MaterialUIComponents 目录 下的八个模块文件，每个分类对应一个数据数组加一个网格渲染函数。

八大分类的完整组件清单

下面按原文档章节顺序，完整列出各分类下的组件（名称来自各数据源文件，md2: true 表示该组件对应 Material Design 2 的官方规范，noGuidelines: true 表示官方规范中不存在对应指引、组件为库自行定义）：

Inputs（输入类组件）

数据源：MaterialInputComponents.js

组件	规范依据	说明
Autocomplete	无官方规范（noGuidelines）	自动补全输入框
Button	MD2	标准按钮
Button Group	无官方规范	按钮组
Checkbox	MD2	复选框
Floating Action Button	MD2	悬浮操作按钮（FAB）
Radio Group	MD2	单选按钮组
Rating	无官方规范	评分控件
Select	MD2	下拉选择
Slider	MD2	滑块
Switch	MD2	开关
Text Field	MD2	文本输入框
Transfer List	无官方规范	穿梭列表
Toggle Button	无官方规范	切换按钮

Data display（数据展示类组件）

数据源：MaterialDataDisplayComponents.js

组件	规范依据
Avatar	无官方规范
Badge	无官方规范
Chip	MD2
Divider	MD2
Icons	MD2（图标入口）
Material Icons	MD2（Material 图标字体）
List	MD2
Table	MD2
Tooltip	MD2
Typography	MD2

Feedback（反馈类组件）

数据源：MaterialFeedbackComponents.js

组件	规范依据	说明
Alert	无官方规范	警告/提示信息
Backdrop	无官方规范	背景遮罩
Dialog	MD2	对话框
Progress	MD2	进度指示（Linear/Circular）
Skeleton	无官方规范	骨架屏
Snackbar	MD2	轻提示

Surface（表面/容器类组件）

数据源：MaterialSurfaceComponents.js

组件	规范依据	说明
Accordion	MD1	折叠面板（注意其规范依据是 MD1 而非 MD2）
App Bar	MD2	应用顶栏
Card	MD2	卡片
Paper	MD2	基础纸面容器

Navigation（导航类组件）

数据源：MaterialNavigationComponents.js

组件	规范依据	说明
Bottom Navigation	MD2	底部导航
Breadcrumbs	无官方规范	面包屑
Drawer	MD2	抽屉
Link	无官方规范	超链接
Menu	MD2	菜单
Pagination	无官方规范	分页
Speed Dial	无官方规范	快速拨号
Stepper	MD1	步骤条（规范依据为 MD1）
Tabs	MD2	标签页

Layout（布局类组件）

数据源：MaterialLayoutComponents.js

组件	规范依据	说明
Box	无官方规范	基础布局容器
Container	无官方规范	页面级容器
Grid	无官方规范	网格布局
Stack	无官方规范	弹性盒子堆叠布局
Image List	MD2	图片列表

Lab（实验室组件）

数据源：MaterialLabComponents.js

组件	规范依据	说明
Masonry	无官方规范	瀑布流布局
Timeline	无官方规范	时间线

Lab 分类对应仓库中的 mui-lab 包，其中的组件处于实验状态，API 可能在次要版本间变化，生产使用前应关注其稳定性声明。

Utils（工具组件）

数据源：MaterialUtilComponents.js。这一类与前面不同，它渲染的是信息卡片（InfoCard）而非截图展示卡：

• Click-Away Listener（点击外部监听）
• CSS Baseline（CSS 基线重置）
• Modal（模态基座）
• No SSR（跳过服务端渲染）
• Popover（气泡浮层）
• Popper（弹层定位）
• Portal（传送门）
• Textarea Autosize（文本域自动撑高）
• Transitions（过渡动画）
• useMediaQuery（媒体查询 Hook）

组件清单的工程实现：从数据源到渲染

卡片网格渲染模式

以 MaterialInputComponents.js 为例，每个分类的渲染函数都遵循同一模式：

export default function MaterialInputComponents() {
  return (
    <Grid container spacing={2} sx={{ pt: 1 }}>
      {inputComponents.map(({ name, link, srcLight, srcDark, md1, md2, md3, noGuidelines }) => (
        <Grid sx={{ flexGrow: 1 }} key={name} size={{ xs: 12, sm: 4 }}>
          <ComponentShowcaseCard
            link={link}
            name={name}
            srcLight={srcLight}
            srcDark={srcDark}
            md1={md1}
            md2={md2}
            md3={md3}
            noGuidelines={noGuidelines}
            imgLoading="eager"
          />
        </Grid>
      ))}
    </Grid>
  );
}

每个数据项包含六个字段，含义如下：

• name / link：组件显示名称与文档页路径（如 /material-ui/react-autocomplete/）；
• srcLight / srcDark：亮色与暗色两套预览图，存放于 docs/public/static/ 静态资源目录，供卡片在两种配色模式下展示；
• md1 / md2 / md3：该组件的规范依据版本（MD1 初版规范、MD2 第二代规范、MD3 第三代规范），三个布尔值互斥使用；
• noGuidelines：为 true 时表示 Material Design 官方没有对应规范，组件完全由库自主设计（如 Autocomplete、Rating、Skeleton、Box 等）。

ComponentShowcaseCard 与 InfoCard 均来自内部文档包 internal-core-docs，Grid 则直接取自 @mui/material——总览页本身就是用 Material UI 的 Grid 布局组件（xs: 12, sm: 4 表示小屏单列、中屏每行三列）拼出来的。

分类数据与 @mui/material 源码的一一对应

数据源中列出的展示名与 packages/mui-material/src 目录下的实现目录可以相互印证。例如展示名 “Floating Action Button” 对应 Fab 目录，“App Bar” 对应 AppBar 目录，“Transfer List” 对应 TransferList 目录。总览页之外，@mui/material 的源码中还包含大量未在总览页单独列卡片的组合子组件与工具组件，例如 ButtonBase（各类按钮的共同基座）、ButtonGroup、InputBase/Input/FilledInput/OutlinedInput（Text Field 的输入实现层次）、Dialog*/Accordion*/Card* 系列子组件、Collapse/Fade/Grow/Slide（Transitions 章节的过渡组件）等。也就是说，总览页的“组件”是面向使用者的概念粒度，而源码目录是更细的实现粒度；理解某组件时建议从总览页链接进入其文档页，再到 packages/mui-material/src/<Component>/ 查看具体实现与测试。

如何使用这份组件图谱

1. 选型定位：按“输入/展示/反馈/表面/导航/布局”的职责模型判断新需求属于哪一类，再到对应类别中找组件；
2. 规范对齐：通过 md1/md2/noGuidelines 字段判断该组件是否有官方规范背书——noGuidelines: true 的组件（如 Skeleton、Box、Stack）行为完全由库定义，升级时更应依赖本仓库的 API 文档与变更日志；
3. 深入实现：每个组件卡片链接指向的文档页包含完整的 Props 表与示例；源码位于 packages/mui-material，实验组件位于 packages/mui-lab。

需要说明的是，Lab 组件（Masonry、Timeline）在 mui-lab 包中维护，其 API 稳定性低于主包组件；此外 @mui/material 中还存在 MobileStepper、MenuItem、ListSubheader 等未单独列卡的子级组件，完整导出以 packages/mui-material/src/index 与官方 API 文档为准。