🐜 组件库时代:Ant Design / MUI / Element

一句话定性

当 SPA 把 UI 变成”组件”,Bootstrap 那套”全局 class + jQuery 插件”就过时了。Ant Design、Material-UI(MUI)、Element UI 接管战场,带来一个新契约:给你一个开箱即用、样式行为状态 a11y 全包的 <Button>。这是封装度的巅峰——也因此把”控制权”压到了谷底。整整一个时代,前端工程师都在和”如何覆盖组件库的内置样式”作斗争。同时,“Design System(设计系统)“作为一门显学,正是在这里登上历史舞台。

一、它是什么 & 出现的时代

2013-2018 SPA时代,React/Vue/Angular-2+ 确立了组件化范式。配套出现的,是一批框架绑定的完整组件库——三个最具代表性的:

组件库	诞生	出品方	绑定框架	设计语言	主战场
Ant Design (AntD)	2015	蚂蚁金服	React	Ant Design 自有语言	企业中后台
Material-UI → MUI	2014 起	社区	React	Google Material Design	通用 / 国际
Element UI	2016	饿了么	Vue	自有	中国 Vue 生态、中后台

它们和 Bootstrap 的根本区别:Bootstrap 给你样式皮(class),让你自己往 DOM 上套、再用 jQuery 加行为;这一代给你的是完整组件——<Button>、<Table>、<DatePicker> 里样式、交互行为、内部状态、无障碍全部打包好了。

// AntD: 不是套 class, 而是用组件; 排序/分页/选择/键盘交互全内置
import { Table, DatePicker } from 'antd';
<DatePicker onChange={handleChange} />
<Table columns={columns} dataSource={data} pagination />

二、为什么会出现(解决上一代什么痛点)

Bootstrap 模型在 SPA 里彻底失效

Bootstrap 的世界观是”全局 CSS class + jQuery 操作 DOM”。但 React/Vue 应用里:

没人想直接操作 DOM——而 Bootstrap 的 JS 插件恰恰基于 jQuery 直接操作 DOM,和虚拟 DOM 打架;

复用单位变了:开发者要的是可复用、可组合、带状态的组件,不是一串拼接的 class 名;

样式要隔离:组件化追求样式封装,全局 CSS 反而成了污染源。

三股力量合流,催生了”框架绑定的完整组件库”:

组件化范式:React/Vue 让”封装一个带行为和状态的组件”成为自然单位,组件库顺理成章把整个组件交付给你。
设计一致性诉求:一个产品几十上百个页面,要长得像一家公司出的。靠 Bootstrap 套 class 无法保证,靠一套统一的组件库可以。
企业中后台的大爆发(关键推手):移动互联网与 SaaS 浪潮下,无数后台管理系统、数据看板、配置平台涌现。它们的特点是——表单、表格、弹窗多到爆炸,但对个性化几乎无要求。这正是全包型组件库的完美场景:<Table> 自带排序分页、<Form> 自带校验布局,生产力直接起飞。AntD 几乎成了中国企业中后台的事实标准。

三、核心机制 & 为什么流行

完整组件交付:一个组件 = 样式 + 交互行为 + 内部状态 + 无障碍 + 边界处理,全包。开发者从”拼装零件”升级为”摆放成品”。
设计语言背书:MUI 落地 Google 的 Material Design;AntD 沉淀蚂蚁的中后台设计经验。组件库不只是代码,更是一套被验证过的设计规范的可执行版本。
中后台杀手级组件:Table(排序/筛选/分页/可编辑)、Form(校验/联动/布局)、DatePicker、Tree、Cascader——这些组件自己写要花几周,直接用只要几行。这是它们统治中后台的核心。
生态完整:文档、国际化、主题、图标库、配套脚手架(如 Ant Design Pro)一应俱全。

Design System 概念在这里登上历史舞台

这一代组件库最深远的影响,是把 Design System(设计系统) 从概念变成日常实践。一个 Design System 不只是”组件库”,而是 设计原则 + Design Token(颜色/间距/字号/圆角等设计变量) + 组件 + 文档 + 协作流程 的总和——是设计师与工程师之间的共享契约。

AntD / Material Design 本身就是公开的 Design System 范本;

Google Material、Salesforce Lightning、Shopify Polaris、Atlassian、Ant Design 等,让”大公司必须有自己的 Design System”成为行业共识;

Design Token 这一抽象(把设计决策变量化、可被代码和设计工具共享)正是在此期间普及——它会在 Headless / shadcn 时代成为关键拼图。

四、带来的新问题 / 副作用

"全包"是把双刃剑:封装度的巅峰 = 控制权的谷底

主题定制难、换肤是噩梦:想要”既用它的组件,又是我自己的品牌风格”,极其痛苦。早期 AntD 要改 Less 变量重新编译,定制深一点就要 eject 或 patch 源码;深度换肤几乎是项目级工程。

样式覆盖之痛(贯穿整个时代的母题):组件内置样式优先级高,你的覆盖样式要靠 !important、:deep()、层层加码的选择器、或追着它的内部 className 写——脆弱、易碎、升级即崩。这正是 Bootstrap “用它容易改它难”母题的延续与升级。

bundle 体积大:全家桶很重,虽有按需加载(babel-plugin-import 等),但组件多、样式全,首屏负担可观。

与框架强绑定(lock-in):AntD/MUI 锁死 React,Element 锁死 Vue。技术栈一换,组件库全部推倒重来;一个团队同时用 React 和 Vue,组件无法共享。

行为被”焊死”在样式上:你只想要它那套极难自己写的 a11y 和交互逻辑,但要用就得连它的全套样式一起吃下——两个本应分开的东西被捆绑销售。这正是下一代 Headless 要拆开的那道焊缝。

五、为什么会衰落 / 现状

它们远未衰落,AntD、MUI、Element(及其 Vue3 继任者 Element Plus)至今仍是企业中后台的主力,生产力无可替代。但在对设计高度敏感、要做独特品牌体验的产品里,它们正被新范式分流:

焊缝被撬开:Headless 与 shadcn 的分流

痛点 #2(样式覆盖)和 #5(行为与样式焊死)累积到一定程度,催生了解耦的诉求:

Headless-UI:Radix / Headless UI / React Aria 只交付”行为 + 状态 + a11y”这个最难的内核,样式完全留白,配合 Tailwind 自由出样式——你既拿到难的部分,又夺回样式控制权;

shadcn-ui:更进一步,把组件源码直接拷进你的项目,不再是 npm 依赖,定制无上限。

各组件库也在自我进化以缓解定制之痛:AntD 5.0(2022)用 CSS-in-JS + Design Token 重写了主题系统,换肤体验大幅改善;MUI 提供 styled / Design Token / 甚至自家 Headless 层(MUI Base)。它们都在向”更可定制”靠拢——这恰恰印证了控制权钟摆的方向。

六、对后续技术的影响(因果链)

SPA 组件化 ([[React]]/[[Vue]]) + 全局 CSS 模型失效 (Bootstrap 不再契合)
        │           +  企业中后台大爆发 (表单/表格多, 个性化少)
        ↓
框架绑定的完整组件库: AntD(2015) / MUI / Element(2016)
        │  → 给"完整组件"(样式+行为+状态+a11y 全包), 生产力起飞
        │
        ├─► 沉淀出 Design System + Design Token 范式 ──┐ (关键遗产)
        │                                              │ 被 Headless/shadcn 继承
        │                                              ▼
        ├─► 副作用: 主题/样式覆盖难 (!important 战争)
        │       └─► "想要行为却被迫连样式一起吃" (焊缝)
        │              │
        │              ↓ 解耦诉求
        │       [[Headless-UI]]: 只给行为/状态/a11y, 样式留白 (配 [[原子化CSS]])
        │              │
        │              ↓ 再进一步: 连依赖都不要
        │       [[shadcn-ui]] (2023): 源码复制进项目, 定制无上限
        │
        └─► 副作用: 与框架强绑定 ──► 跨框架无法复用 ──► 推动"框架无关"的逻辑层
                                                       (React Aria / TanStack 思路)

历史地位

这一代组件库是”控制权钟摆”摆到封装度顶点的时刻:它用”全包”换来了 SPA + 中后台时代无与伦比的生产力,也沉淀了 Design System / Design Token 这份将被后世继承的关键遗产。但”全包”同时把”行为 a11y”和”样式品牌”焊死在一起——这道焊缝积累的张力,正是后续 Headless-UI 解耦、shadcn-ui 反依赖两次回摆的直接动因。Element UI 的故事还连着另一条线:它是 Vue 在中国生态繁荣的重要拼图(见为什么Vue在中国崛起)。

前端技术演化史

探索

组件库时代-AntD-MUI-Element

🐜 组件库时代:Ant Design / MUI / Element

一、它是什么 & 出现的时代

二、为什么会出现(解决上一代什么痛点)

三、核心机制 & 为什么流行

四、带来的新问题 / 副作用

五、为什么会衰落 / 现状

六、对后续技术的影响(因果链)

关系图谱

目录

反向链接