从 Material-UI 到 MUI：品牌更名背后的产品矩阵重构与 @mui 包生态迁移指南

导读：2021 年 9 月，Material-UI 宣布了项目历史上最重要的一次身份升级——组织更名为 MUI，组件库产品改为 Material UI（去掉了连字符），npm 包组织名从 @material-ui 迁移到 @mui。这篇技术回顾以官方公告文档 docs/pages/blog/material-ui-is-now-mui.md 为主体，结合本仓库（material-ui monorepo）当前的源码、包结构与迁移文档，讲清这次改名"改了什么、为什么改、对开发者有什么实际影响"，以及今天你在仓库里看到的目录结构正是这次品牌决策的直接产物。读完你将掌握 @material-ui/* 到 @mui/* 的包映射关系、v5 破坏性变更的自动迁移工具，以及品牌拆分背后的技术动因。

一次改名，四重身份：MUI 产品矩阵的确立

根据官方公告，这次更名并非简单的换名字，而是为了厘清"公司"与"产品"两个长期混用的概念。此前 "Material-UI" 一词同时指代组件库、GitHub 组织与公司，四个层面的身份被一次性重新定义：

• Material-UI（组件库） → Material UI：由 MUI 开发的 Material Design 组件库，去掉了中间的连字符（hyphen）；
• Material-UI（组织） → MUI：作为组织的全新名称；
• Material-UI X（进阶组件集） → MUI X：面向复杂业务场景的高级 React 组件集合；
• Material-UI（基础组件集） → MUI Core：以 MIT 协议开源发布的基础 React 组件集合。

公告明确指出，旧名字"已经无法承载我们专注的领域"，团队的产品范围在不断扩展，"我们需要一个新身份来匹配更大的格局"。

这条产品线划分在今天依然清晰可见。本仓库即当时的 "MUI Core" 基础组件库（monorepo 根 package.json 名为 @mui/monorepo），其中 packages/mui-material/package.json 声明了 @mui/material 包，自述为 "an open-source React component library that implements Google's Material Design"，许可证为 MIT——正是公告中 "free forever" 的落实。

追根溯源：2014 年一个"Material Design 的 React 实现"

公告回顾了项目的起源：Material UI 始于 2014 年，最初只是将 Google Material Design 设计规范用 React 实现出来的一个开源项目，目标朴素——"让 React 开发者能用上 Material Design"。社区反响热烈并持续提出更多需求，团队于是不断迭代。

早期增长的两个关键因素是开放的社区协作模式与里程碑版本：

• 团队降低了社区贡献门槛，积极审查 Pull Request、引导 Issue 讨论；截至公告发布时，已有 超过 2200 名开发者为该项目贡献过代码；
• 2018 年 v1 正式发布（见本仓库中的 material-ui-v1-is-out.md）让项目进入快车道。当时前端社区正大规模向 React 迁移，但又没有足够精力从零重建遗留界面，这套开箱即用的组件恰好填补了空白。

按官方博客当时的描述，它由此成长为 React 生态中被广泛采用的 UI 组件库，组件被大量用于客户界面（customer-facing applications）、内部工具与移动混合应用（mobile-hybrid apps）的开发。仓库中 docs/data/material/components/ 下上千个 demo 文件（546 个 .js、538 个 .tsx）也从侧面反映了组件覆盖面之广。

更大的格局：为什么 v5 选择重做"定制化体验"

改名并非心血来潮，公告给出了两次用户调研作为决策依据：

• 在最近一次调研中，关于"改进 Material Design 实现"的开发者评论数量同比下滑了 60%；
• 与此同时，抱怨"难以定制组件"的开发者数量是前一年的 5 倍。

换句话说，用户对"像不像 Material Design"的关注在下降，对"好不好定制"的诉求在飙升。基于这一背景，团队从 2019 年开始推进 v5，核心目标是重构 定制化开发者体验（customization DX）——设计（审美与 UX）和 DX 被明确视为打开下一阶段增长的关键。

这一论断在同仓库的 mui-core-v5.md 发布博客中有更完整的展开：v5 重写了样式方案（以 Emotion 取代 JSS），引入 sx prop、styled() 与新主题结构来改善定制体验，并强调"设计能力"要向开发者开放。公告也点明新品牌正是为 v5.0.0 发布站台，同时为更广阔的后续计划腾出空间——其终极目标被表述为"成为构建 UI 最有效率的工具，并让更多人用得上"。

仓库中 docs/data/material/migration/migration-v4/ 目录（migration-v4.md、v5-style-changes.md、v5-component-changes.md、migrating-from-jss.md、troubleshooting.md）正是这一轮升级沉淀下来的完整迁移文档。

新品牌全景

新名字：MUI = Material to build UIs

团队刻意要打破与 Material Design 的强绑定，因为太多人把 Material UI 误认为 Google 官方产品或 Material Design 的同义词。新名字 MUI 是 Material 与 UI 的组合（意为"用 Material 精神构建 UI"），发音为 /ɛm juː aɪ/。

这个名字更短、更有辨识度，且许多社区用户早已习惯用 MUI 作为缩写。更关键的是，它可以承载不依赖 Material Design 的产品线——例如无样式（unstyled/headless）组件版本、一个替代 MD 的第二套设计系统，以及更多野心更大的项目。事实上，mui-core-v5.md 中披露的第二设计系统代号 Joy，正是这一战略的后续落地。

新域名：mui.com

官方将主站从 material-ui.com 迁往更容易输入和记住的 mui.com。在今天仓库中，各包元数据也统一使用 mui.com 域名，例如 packages/mui-material/package.json 的 homepage 指向 https://mui.com/material-ui/，author 字段为 "MUI Team"。

新 Logo：从"3D 透视"到"构建积木"

Logo 更新的思路是"保持熟悉感、降低陌生成本"：

• 保留几何形状：延续"构建积木"（building blocks）的产品隐喻；
• 弱化 3D 透视：刻意远离 Material Design 提出的"高度（elevation）"概念，从视觉上与 MD 做切割。

公司 Logo 之外，团队还为每个产品线设计了独立 Logo，以便更好地识别、营销和推广各个产品：

三个产品线的定位如下（沿用公告原文语义）：

• MUI Core：包含开箱即用的基础组件，永久免费（MIT 协议）——即本仓库主体；
• MUI X：面向复杂业务场景的高级与强力组件；
• Templates：由社区开发、团队精选审核的完整 React 应用模板集合，供直接套用。

新包名：@material-ui/* → @mui/* 的破坏性变更与迁移

包名变更是这次品牌升级中最需要开发者行动的破坏性变更（breaking change）。npm 组织名（scope）从 @material-ui 整体迁移到 @mui。官方迁移文档 migration-v4.md 给出了完整映射表：

旧包名（@material-ui/*）	新包名（@mui/*）
@material-ui/core	@mui/material
@material-ui/unstyled	@mui/base
@material-ui/icons	@mui/icons-material
@material-ui/styles	@mui/styles
@material-ui/system	@mui/system
@material-ui/lab	@mui/lab
@material-ui/types	@mui/types
@material-ui/styled-engine	@mui/styled-engine
@material-ui/styled-engine-sc	@mui/styled-engine-sc
@material-ui/private-theming	@mui/private-theming
@material-ui/codemod	@mui/codemod
@material-ui/docs	@mui/internal-core-docs
@material-ui/envinfo	@mui/envinfo

安装命令相应变化，例如：

npm install @mui/material @mui/styles
npm install @mui/icons-material
npm install @mui/lab

（使用 yarn 的仓库可将 npm install 替换为 yarn add。）源码中的导入语句则从：

import Chip from '@material-ui/core/Chip';

改为：

import Chip from '@mui/material/Chip';

推荐的自动化迁移方式是运行官方 codemod preset-safe（在仓库中即 packages/mui-codemod，其 v5.0.0 目录 packages/mui-codemod/src/v5.0.0/ 下存放着 box-sx-prop.js、chip-variant-prop.js 等数十个转换器）：

npx @mui/codemod@latest v5.0.0/preset-safe <path>

迁移文档同时提醒：preset-safe 应在每个目录上只运行一次，且每跑完一个 codemod 都要确认应用仍能正常运行并提交后再继续下一步。若使用日期选择器类组件，还需留意从 @material-ui/date-pickers / @mui/lab 迁移到 @mui/x-date-pickers 的路径（MUI X 独立成库）。

值得一提的版本细节：迁移文档还强调 v5 默认样式引擎由 JSS 换为 Emotion，若暂不想立即迁移全部样式代码，可继续使用已弃用的 @mui/styles 包承载 JSS 覆盖方案，详见 migrating-from-jss.md。同时 v5 最低支持的浏览器与 Node 版本也依据 "> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11, maintained node versions" 的 browserslist 查询做了提升。

新官网与文档：v5 主题能力的一次"自举"

作为新篇章的庆祝动作，官网与文档也随 v5.0.0 一起全新改版：新的字体、配色、盒阴影等，且全部使用 v5 自身的灵活主题（theming）特性构建——这是对 v5 主题定制能力最好的自证。

官方特别标注了一个容易误解的点：官网与文档的视觉风格变化，不影响 @mui/* npm 包中组件的设计。换言之，"网站换皮肤"与"组件外观"是两件事——文档站点只是 v5 主题能力的一个消费示例。公告中的 this caution 在今天的仓库里依然成立：docs 站点由 docs/next.config.ts、nextConfigDocsInfra.js 等配置驱动，而组件的默认外观则由 packages/mui-material/src 决定。

从仓库现状印证这次改名的成果

回到"改名是否真的落地"这个问题，当前仓库本身就能给出最直接的证据链：

• monorepo 根 package.json 声明为 @mui/monorepo（版本 9.4.0，说明这条主线此后又经历了 v6、v7、v8 直至 v9 的演进）；
• 核心包目录 packages/ 下全部采用 mui-* 命名：mui-material、mui-icons-material、mui-lab、mui-system、mui-codemod 等，包内 name 字段均为 @mui/* 前缀（如 packages/mui-material/package.json 的 "name": "@mui/material"）；
• 产品文档按产品线归档在 docs/data/（material/、system/ 等）与 docs/pages/（含迁移指南、博客等）下；
• 本次改名的公告本身也作为一篇博客永久存档于 material-ui-is-now-mui.md（对应页面文件 material-ui-is-now-mui.js），与同期的 mui-core-v5.md、2020-developer-survey-results.md 共同构成理解这次转型的一手资料。

前方之路：改名之后发生了什么

公告在收尾处给出了清晰的路线承诺：

• Material Design 仍将获得与以往同等细致的支持，继续服务偏爱贴近 MD 的用户群；
• 在此基础上，团队将依托既有积累提供新的组件、设计与产品。

从后续仓库演进看，这些承诺确实兑现为具体的代码与文档：packages/mui-material 之外的 @mui/base 演进、第二设计系统的独立探索（Joy/MUI System）、面向复杂场景的 MUI X 独立成库，以及至今仍在维护的 docs/data/material/migration 多版本升级路径（v3→v4→v6→v7→v9）。对今天的开发者而言，理解 2021 年这次"改名"的完整逻辑，也就等于理解了 @mui/* 命名空间下整条产品线的分界与由来。