React项目使用Material-UI TreeView/TreeItem遇withStyles导出错误求助

错误根源 #

你遇到的问题是Material UI版本不兼容导致的：

• 项目中安装的@material-ui/lab@4.0.0-alpha.61是v4版本的实验组件库，它内部依赖v4版本的withStyles工具，该工具在v4中属于@material-ui/core/styles。
• 但你同时安装了v5版本的@material-ui/core@5.0.0-beta.5和@mui/material@5.11.13，v5版本已经将withStyles迁移到@material-ui/styles包中，v4的TreeView组件找不到正确的导入路径，因此抛出错误。

解决方案 #

推荐统一使用Material UI v5稳定版（当前官方主推版本），操作步骤如下：

1. 清理旧的v4依赖包
   在终端执行卸载命令：

   npm uninstall @material-ui/core @material-ui/lab @material-ui/icons @material-ui/styles
   

2. 安装v5对应依赖
   安装v5版本的实验组件库和图标库：

   npm install @mui/lab @mui/icons-material
   

   注：你的项目已经安装了@mui/material（v5核心库），无需重复安装。

3. 修改组件导入路径
   更新App.js中的导入语句，将@material-ui/lab替换为@mui/lab：

   import './App.css';
   import * as React from "react";
   import TreeView from "@mui/lab/TreeView";
   import TreeItem from "@mui/lab/TreeItem";
   
   function App() {
       return (
           <div>
               <TreeView>
                   <TreeItem nodeId={"1"} label={"test"}/>
               </TreeView>
           </div>
       );
   }
   
   export default App;
   

4. 重启开发服务器
   关闭当前的npm start进程，重新执行npm start，验证组件是否正常渲染。

备选方案（坚持使用v4） #

如果需要保留v4版本，需确保所有Material UI包版本统一：

1. 卸载v5相关依赖：

   npm uninstall @material-ui/core @mui/material @emotion/react @emotion/styled
   

2. 安装v4稳定版核心库：

   npm install @material-ui/core@4.12.4
   

3. 确保@material-ui/lab版本与@material-ui/core匹配（v4版本的lab需对应v4核心库）。

内容的提问来源于stack exchange，提问作者JeSuisGrand