Material UI如何实现点击登录按钮后显示页面全屏加载Spinner遮罩

问题原因 #

你当前的写法仅将加载组件普通渲染在文档流中，没有配置全屏定位、半透明遮罩背景和高层级，因此无法实现全屏覆盖效果。

解决方案（推荐，使用Material UI内置组件） #

Material UI 内置的Backdrop组件就是专门用来实现全屏遮罩效果的，不需要自己写复杂的样式，修改步骤如下：

1. 先引入所需组件：

import { Backdrop, CircularProgress } from '@mui/material'; // 如果你用的是v4版本，导入路径为@material-ui/core

2. 替换原代码中条件渲染加载组件的部分，其余表单代码无需改动：

<Fragment>
  {/* 替换原来的加载逻辑 */}
  <Backdrop
    sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
    open={isLoading}
  >
    <CircularProgress color="inherit" />
  </Backdrop>

  {/* 下面原有的Paper表单代码保持不变 */}
  <Paper variant="outlined" className={classes.root}>
    {/* 其余原有代码省略 */}
  </Paper>
</Fragment>

3. 完善提交逻辑：在onSubmit函数中，发起登录请求前先将isLoading设为true，请求完成（无论成功失败）后再将isLoading设为false即可。

备选方案（自定义样式实现） #

如果你不想使用内置组件，也可以给加载组件外层加自定义样式实现相同效果：

<Fragment>
  {isLoading && (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100vw',
      height: '100vh',
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      zIndex: 9999
    }}>
      <CircularProgress color="primary" />
    </div>
  )}
  {/* 原有表单代码保持不变 */}
</Fragment>

修改完成后即可实现你需要的全屏半透明遮罩+居中加载动画的效果，同时会屏蔽用户对下层表单的操作。

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