使用Material UI Backdrop组件触发Invalid Hook Call错误如何修复？

问题原因 #

你出现Invalid hook call错误的核心原因是混用了两个不兼容的Material UI大版本：

• 现有代码中@material-ui/core、@material-ui/styles属于Material UI v4版本依赖
• 新增的@mui/material/Backdrop、@mui/material/CircularProgress属于Material UI v5版本依赖
  两个大版本的内部Hook、React上下文实现不兼容，同时调用就会触发该错误。

解决方案 #

你可以任选以下两种方案之一修复： #

方案1：统一使用v4版本组件（无需改动现有业务代码，适合老项目快速修复）

1. 删除现有的v5版本组件导入语句：

import Backdrop from '@mui/material/Backdrop'
import CircularProgress from '@mui/material/CircularProgress';

2. 替换为v4版本的组件导入：

import Backdrop from '@material-ui/core/Backdrop';
import CircularProgress from '@material-ui/core/CircularProgress';

3. v4不支持sx属性，需要把样式移到现有makeStyles中定义：

const useStyles = makeStyles({
    heading : {
        fontFamily: 'Roboto',
        fontSize: 14,
        fontStyle: 'normal',
        fontWeight: 700,
        lineHeight: 1,
        color: props => props.pColor
    },
    // 新增backdrop样式
    backdrop: {
      color: '#fff',
      zIndex: (theme) => theme.zIndex.drawer + 1,
    }
})

4. 修改Backdrop组件属性，把sx替换为className：

<Backdrop 
  className={classes.backdrop}
  open={open}
  onClick={handleClose}
>
  <CircularProgress color='inherit' />
</Backdrop>

方案2：统一升级所有依赖到v5版本（适合新项目，长期维护更推荐）

1. 卸载所有v4版本依赖：

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

2. 安装v5版本的核心依赖：

npm install @mui/material @emotion/react @emotion/styled

3. 把代码中所有@material-ui开头的导入语句，统一替换为@mui/material即可，原有sx属性不需要改动。

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