material-ui
Material Design 风格的 React UI 组件库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：material-ui。 它的用途是：Material Design 风格的 React UI 组件库。 完整的 Skill 内容见：https://321skill.com/skills/material-ui/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用 Material UI 快速搭建一个包含导航栏、侧边抽屉和主内容区的管理后台页面框架。”，它会提供相应的组件导入代码和基本布局结构。或者
对AI说：“我想创建一个带有表单验证的登录对话框，使用 Material UI。”，它会生成包含 `TextField`、`Button` 和 `Dialog` 组件的代码示例，并提示如何进行简单的表单状态管理。
介绍
Material UI 是一个基于 React 的、全面实现 Google Material Design 设计系统的 UI 组件库。它提供了从按钮、表单到复杂布局和数据表格在内的大量高质量、可定制的组件，旨在帮助开发者快速构建现代化、一致且美观的 Web 应用界面。
使用 Material UI 非常简单，通过 npm 或 yarn 安装核心包后，即可在 React 项目中直接导入并使用其组件。它提供了详尽的文档、丰富的示例和强大的主题定制系统，开发者可以通过修改主题变量或使用 sx 属性轻松调整组件外观，以适应品牌需求。
它非常适合前端开发、全栈开发以及需要快速构建企业级或消费级 Web 应用界面的产品团队。对于追求开发效率、设计一致性和代码质量的开发者来说，Material UI 是一个极佳的选择。
使用建议是，对于新项目，建议直接从最新的 v6 版本开始。虽然库本身功能强大，但打包体积相对较大，在构建对性能极其敏感的应用时，需要注意按需引入和代码分割。此外，其设计风格相对固定，若项目需要完全脱离 Material Design 的视觉语言，定制成本会较高。
核心特点
作为最成熟、最流行的 React UI 库之一，Material UI 拥有超过十年的社区迭代和数千名贡献者，其组件稳定性、可访问性（a11y）支持和 TypeScript 集成深度在业界领先。同时，它不仅是组件集合，更提供了一套完整的、可扩展的设计系统工具（如主题、样式引擎），并与 MUI X 高级组件库无缝集成。
注意事项
其设计风格紧密遵循 Material Design，若项目需要完全自定义或截然不同的视觉风格，调整成本较高。
常见问题
Material UI 和 Ant Design 有什么区别？
Material UI 严格遵循 Google Material Design 规范，设计风格现代、圆润；Ant Design 源自蚂蚁集团，设计风格更偏向企业级和中台应用。两者在组件丰富度和社区生态上各有千秋。
如何自定义 Material UI 的主题颜色和字体？
通过创建 `ThemeProvider` 并传入自定义的 `createTheme` 对象，可以轻松覆盖默认的主题变量，包括调色板、字体、间距等。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/material-ui/raw/index.md 读取 material-ui 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/material-ui/raw/index.md（查看排版版本）