Material Design是谷歌在2014年推出的一套完整的设计语言系统，它融合了经典的设计原则与科技创新的可能性，为移动端和Web端应用提供了统一、美观、富有层次感的视觉规范。而Material UI（简称MUI），正是React生态中对Material Design最完整、最流行、最专业的实现。根据GitHub统计，Material UI已获得超过9万Star，每周下载量超过400万次，是全球使用最广泛的React UI组件库之一。
Material UI由谷歌工程师团队创建并维护，后发展为独立的开源组织MUI。它不仅仅是一套组件库，更是一个完整的设计系统，包含React组件库、图标库、主题定制工具、设计资源等完整生态。经过多年发展，Material UI已经从单纯的Material Design实现演进为支持多种设计风格的灵活框架，最新版本v7已全面支持CSS变量、ES模块和现代工具链。
本文将系统全面地梳理Material UI的核心知识点，从设计理念到安装配置，从核心组件到主题定制，从样式覆盖到性能优化，帮助读者建立完整的知识体系，能够熟练运用Material UI构建高质量的企业级React应用。
一、Material UI概述
1.1 什么是Material UI
Material UI是一个React组件库，实现了谷歌的Material Design设计语言。它提供了超过50个高质量的组件，帮助开发者快速构建符合Material Design规范的React应用。Material UI不仅提供了美观的组件，还注重组件的可定制性和灵活性。
Material UI的核心设计理念可以概括为三个关键词：
1.2 Material UI的版本演进
Material UI经历了多个重要版本的演进，每个版本都带来了重大的技术革新：
版本选择建议：新项目请使用MUI v5+（即@mui/material），v4已于2021年底正式结束维护。v4对React的peer dependency严格限定为^16.8.0 || ^17.0.0，无法原生支持React 18。如果使用v4并强制安装到React 18环境，极可能导致运行时异常、Hooks行为异常或主题系统失效。
1.3 核心价值
谷歌Material Design官方实现
Material UI是目前最完整、最专业的Material Design React实现。它严格遵循Material Design规范，提供了从颜色系统、字体系统到动画过渡的完整设计方案。同时，Material UI团队与谷歌设计师保持紧密合作，确保组件行为与官方规范保持一致。强大的主题定制能力
Material UI的主题系统是其核心竞争力之一。通过createTheme和ThemeProvider，开发者可以轻松定制应用的整体外观，包括主色调、字体、圆角、阴影等。主题系统支持嵌套，可以在应用的不同部分使用不同的主题。完善的可访问性支持
Material UI高度重视可访问性（a11y），所有组件都遵循WAI-ARIA规范，支持键盘导航和屏幕阅读器。这确保了应用能够被包括残障人士在内的所有用户使用。活跃的社区生态
Material UI拥有庞大的社区和丰富的生态系统，包括官方图标库（@mui/icons-material，超过2000个Material Design图标）、高级组件库（MUI X，包含Data Grid、Date Pickers等）、模板市场（MUI Store）等。
1.4 Material UI vs 其他主流组件库
二、安装与配置
2.1 环境准备
在使用Material UI之前，请确保开发环境满足以下要求：
Node.js 14.x 或更高版本
React 17.0.0 或更高版本（v5+要求React 17+）
TypeScript 3.5+（可选，推荐）
2.2 基础安装
Material UI v5+使用Emotion作为默认的样式引擎，因此需要同时安装Emotion相关依赖。
# 使用npm安装
npm install @mui/material @emotion/react @emotion/styled
# 使用yarn安装
yarn add @mui/material @emotion/react @emotion/styled
# 使用pnpm安装（推荐）
pnpm add @mui/material @emotion/react @emotion/styled
2.3 安装图标库
Material UI提供了官方的图标库，包含超过2000个Material Design图标。
npm install @mui/icons-material
2.4 字体和基线样式
Material UI推荐使用Roboto字体，并提供了CssBaseline组件用于标准化跨浏览器的样式差异。
// App.js 或 main.jsx
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import CssBaseline from '@mui/material/CssBaseline';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import App from './App';
// 可选：引入Roboto字体
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
const theme = createTheme();
createRoot(document.getElementById('root')).render(
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
);
CssBaseline的作用：
标准化不同浏览器的默认样式
设置全局盒模型为border-box
设置默认字体为Roboto
优化滚动条样式
2.5 版本兼容性说明
重要提示：Material UI v4（@material-ui/core）已于2021年底正式结束维护，无法原生支持React 18。如果需要在React 18项目中使用Material UI，请务必使用v5+（@mui/material）。使用--force或--legacy-peer-deps强制安装v4虽然可能跳过版本校验，但极可能导致运行时异常。
来源：
http://lemci.cn/category/xljk.html
