Material-UI #

什么是 Material-UI？ #

Material-UI（现更名为 MUI）是最流行的 React UI 组件库，它实现了 Google 的 Material Design 设计规范。提供了丰富、可定制、高质量的 React 组件，帮助开发者快速构建美观的用户界面。

Material-UI vs MUI #

特性	说明
原名称	Material-UI
新名称	MUI
版本	v5+ 使用 MUI 品牌
组件库	@mui/material
图标库	@mui/icons-material
样式引擎	Emotion (默认) / styled-components

文档结构 #

本指南按以下结构组织：

1. 基础入门 #

主题	描述	文档链接
Material-UI 简介	了解 MUI 的历史、特点和优势	intro.md
安装配置	MUI 的安装和环境配置	installation.md
快速开始	创建第一个 MUI 应用	quick-start.md
主题基础	理解主题系统基础	theming-basics.md

2. 核心组件 #

主题	描述	文档链接
布局组件	Box, Container, Grid, Stack	layout.md
输入组件	Button, TextField, Select, Checkbox	inputs.md
数据展示	Table, Card, List, Avatar	data-display.md
反馈组件	Dialog, Snackbar, Progress, Alert	feedback.md
导航组件	AppBar, Drawer, Tabs, Menu	navigation.md
表面组件	Paper, Card, Accordion	surfaces.md

3. 进阶特性 #

主题	描述	文档链接
高级主题定制	深入主题配置和定制	advanced/theming.md
样式系统	sx prop, styled API, 样式覆盖	advanced/styling.md
响应式设计	断点系统和响应式布局	advanced/responsive.md
图标系统	Material Icons 使用指南	advanced/icons.md

4. 高级扩展 #

主题	描述	文档链接
自定义组件	创建可复用的自定义组件	custom-components.md
性能优化	MUI 应用性能优化技巧	performance.md
最佳实践	企业级开发规范和技巧	best-practices.md

学习路径 #

入门阶段（MUI 新手） #

了解 Material Design 设计理念
安装和配置 MUI 环境
学习基础组件的使用
理解主题系统基础
掌握常用布局组件

进阶阶段（MUI 熟练） #

深入理解主题定制
掌握样式系统（sx prop, styled API）
实现响应式设计
学习图标系统
组件样式覆盖技巧

高级阶段（MUI 专家） #

创建自定义组件
构建设计系统
性能优化实践
TypeScript 集成
测试策略

大师阶段（MUI 大师） #

构建企业级 UI 库
设计可扩展的主题架构
贡献开源项目
跨平台应用开发
持续关注 MUI 最新发展

为什么选择 Material-UI？ #

丰富的组件库 #

jsx

import { Button, TextField, Card, CardContent, Typography } from '@mui/material';

function MyComponent() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5">Welcome</Typography>
        <TextField label="Name" variant="outlined" />
        <Button variant="contained" color="primary">
          Submit
        </Button>
      </CardContent>
    </Card>
  );
}

强大的主题系统 #

jsx

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
  typography: {
    fontFamily: 'Roboto, Arial, sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyApp />
    </ThemeProvider>
  );
}

灵活的样式方案 #

jsx

import { Box } from '@mui/material';

function StyledComponent() {
  return (
    <Box
      sx={{
        p: 2,
        m: 1,
        bgcolor: 'primary.main',
        color: 'white',
        borderRadius: 1,
        '&:hover': {
          bgcolor: 'primary.dark',
        },
      }}
    >
      Hover me
    </Box>
  );
}

MUI vs 其他 UI 库 #

特性	MUI	Ant Design	Chakra UI	Blueprint
设计规范	Material Design	Ant Design	Chakra UI	Blueprint
React 支持	原生	原生	原生	原生
定制性	高	中	高	中
学习曲线	中等	中等	较低	中等
社区规模	最大	大	中	小
TypeScript	完整支持	完整支持	完整支持	完整支持

技术栈概览 #

text

MUI 技术栈
├── @mui/material      核心组件库
├── @mui/icons-material  Material 图标
├── @emotion/react      CSS-in-JS 引擎
├── @emotion/styled     styled API
├── React 18+          核心框架
└── TypeScript         类型支持（可选）

前置知识 #

学习本指南前，建议具备以下基础：

HTML/CSS 基础
JavaScript ES6+ 语法
React 基础知识
Node.js 基础知识

版本说明 #

本指南基于 MUI v5+ 编写，推荐使用最新稳定版本。

版本	状态	说明
MUI v5.x	推荐	最新版本，使用 Emotion
MUI v4.x	维护	旧版本，使用 JSS
Material-UI v3.x	弃用	不再维护

资源推荐 #

MUI 官方文档：最权威的 MUI 文档
Material Design：Google 设计规范
MUI GitHub：源码和问题追踪
MUI Templates：官方模板商店
MUI X：高级组件（数据网格、日期选择器等）

更新日志 #

2026-03-28：创建初始版本，包含完整的 Material-UI 学习大纲

继续探索本指南，逐步掌握 Material-UI 技术，从新手成长为 React UI 组件库专家！