Material UI v5.1.0升级至v5.11.16失败及TS报错求助

云上老周

2026-7-26

Material UI v5.1.0升级到v5.11.16时TypeScript构建报错解决方法

问题描述

项目原本使用Material UI React组件v5.1.0版本，升级至v5.11.16时，仅修改package.json中以下依赖版本号后构建失败：

"@mui/icons-material": "^5.1.0",
"@mui/material": "^5.1.0",

在Azure DevOps构建管道执行npm build命令时，出现如下TypeScript报错：

[build:types] node_modules/@mui/base/TextareaAutosize/TextareaAutosize.d.ts(14,93): error TS2344: Type '"required" | "id" | "name" | "color" | "translate" | "value" | "hidden" | "dir" | "form" | "slot" | "style" | "title" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | ... 253 more ... | "onResizeCapture"' does not satisfy the constraint 'keyof TextareaAutosizeProps'.
[build:types]   Type '"nonce"' is not assignable to type 'keyof TextareaAutosizeProps'.
[build:types] npm ERR! code ELIFECYCLE
[build:types] npm ERR! errno 1
[build:types] npm ERR! @servcorp/smart-office-navigation@ build:types: `tsc`
[build:types] npm ERR! Exit status 1

解决步骤

清理依赖缓存并重装
直接修改版本号可能导致依赖版本不一致，先清理旧依赖再重装：
```
rm -rf node_modules package-lock.json
npm install
```
同步升级@mui/base版本
报错来自@mui/base组件库，v5.11.16版本的@mui/material依赖对应版本的@mui/base，需手动同步升级：
修改package.json：
```
"@mui/base": "^5.11.16",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.11.16",
```
执行npm install完成重装。
升级TypeScript至兼容版本
MUI v5.11.x要求TypeScript版本至少为4.9.0，若项目TS版本过低，执行升级：
```
npm install typescript@^4.9.0 --save-dev
```
检查TextareaAutosize使用方式
若项目直接使用@mui/base/TextareaAutosize而非@mui/material/TextareaAutosize，确认props传递是否合规。排查自定义封装组件是否存在类型定义冲突，确保nonce属性符合新版组件的类型要求。
强制更新所有MUI相关依赖
使用命令批量升级所有MUI生态包：
```
npm update @mui/material @mui/icons-material @mui/base @mui/system
```