如何在 React 18 项目中正确安装并使用 Material UI（MUI）-js教程-PHP中文网

如何在 react 18 项目中正确安装并使用 material ui（mui）

本文详解 Material UI v4 与 React 18 不兼容的根本原因，并指导开发者迁移到官方推荐的 MUI v5（@mui/material），涵盖安装命令、基础用法示例及关键注意事项，确保项目稳定运行。

本文详解 Material UI v4 与 React 18 不兼容的根本原因，并指导开发者迁移到官方推荐的 MUI v5（@mui/material），涵盖安装命令、基础用法示例及关键注意事项，确保项目稳定运行。

Material UI v4（即 @material-ui/core）已于 2021 年底正式结束维护，其对 React 的 peer dependency 严格限定为 ^16.8.0 || ^17.0.0，因此无法原生支持 React 18（如你遇到的 ERESOLVE 错误所示）。该错误并非安装方式问题，而是版本架构层面的不兼容——强制安装（--force 或 --legacy-peer-deps）虽可能跳过校验，但极可能导致运行时异常、Hooks 行为异常（如 useEffect 执行逻辑错乱）或主题系统失效，强烈不建议采用。

✅ 正确解决方案：升级至 Material UI 官方当前主版本 —— MUI v5，其完整支持 React 18 及并发渲染特性，并采用全新包命名空间 @mui/*。

✅ 正确安装步骤（React 18 环境）

# 卸载已存在的 v4 包（如有）
npm uninstall @material-ui/core @material-ui/icons @material-ui/styles

# 安装 MUI v5 核心组件与图标（推荐搭配 emotion 作为样式引擎）
npm install @mui/material @emotion/react @emotion/styled

# 如需使用官方图标，额外安装
npm install @mui/icons-material

? 提示：MUI v5 默认使用 @emotion/styled 作为样式解决方案（更轻量、SSR 友好），也可选 styled-components，详见 MUI 官方安装指南。

React 组件生成器
根据项目规范生成 React 和 Vue 组件，包括 TypeScript 类型定义、Ant Design 5 集成、Tailwind CSS 样式及 Vitest 测试文件。当用户提出创建、生成或搭建前端组件的需求时启用，例如：“帮我写一个表格组件”、“生成一个弹窗”、“create a form component”、“写一个列表页”、“生成一个下拉选择器”。该能力在以下任一场景触发：涉及 React/TSX/Vue 组件生成、UI 组件创建，或为组件生成测试文件。

下载

? 基础使用示例（对比 v4 写法）

// ✅ MUI v5 正确写法（React 18 兼容）
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { theme } from './theme'; // 自定义主题（可选）
import Button from '@mui/material/Button';

function App() {
  return (
    <themeprovider theme="{theme}"><cssbaseline></cssbaseline><button variant="contained" color="primary">
        Hello MUI v5!
      </button>
    </themeprovider>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<app></app>);

⚠️ 注意事项：