Material Web：Google 官方 Material 组件实现

Material Web 是 Google 官方的 Material Design Web Components 实现，可以理解为 MDC 的后续方向。它基于 Web Components 标准，能搭配任意框架，实现的是 Material Design 3，还带动态配色令牌。

它解决什么问题

React / Vue 的成熟组件库很多，但「框架无关 + 官方实现」的 Material 方案很少。

Material Design 3 的动态配色很新，多数社区库还没跟上，视觉还原不到位。

核心能力

覆盖广度有边界

Material Web 主打「官方 + 不限框架」，但组件以基础控件为主，复杂业务组件（高级表格、图表、调度器）要自己补，广度不如 React / Vue 的成熟库。

选它的理由通常是：要严格的 Material Design 3 还原、要动态配色、且项目技术栈未定或会换框架。若已锁定 React / Vue，用对应平台的 Material 库可能更省事。

同类工具怎么选

谁适合用

• 需要严格还原 Material Design 3 视觉的项目
• 技术栈未定、希望组件框架无关可复用的团队
• 想要动态配色令牌、按品牌色衍生配色的产品

怎么开始

1. 按 material-web.dev 指引安装 @material/web 包。
2. 在入口文件里注册需要的组件（如按钮、文本域）。
3. 用官方提供的配色令牌设置主色，自动生成 MD3 配色。
4. 在任意框架模板里以自定义元素形式使用这些组件。
5. 复杂业务组件在其基础控件之上自行组合封装。

常见问题

和 MDC 什么关系？
可视为 Material Components Web 的后续方向，新项目建议直接用 Material Web。

复杂表格够用吗？
基础控件齐全，但高级数据网格、图表需自行补齐，它不主打这部分。

授权和商用？
采用 Apache-2.0，可商用、可闭源，需保留 NOTICE 与版权声明。

授权与合规

Material Web 以 Apache-2.0 协议开源，可用于商业与闭源项目；与 MIT 相比多了专利授权条款与 NOTICE 文件保留要求，对大公司更友好。 官网：material-web.dev。