Material ui：如何在页面上显示加载微调器覆盖

Question

我希望在单击“登录”按钮时显示加载微调器

下图显示了这一点

目前我正在尝试

    <Fragment>
      {isLoading == true ? <CircularProgress /> : <div></div>}
      <Paper variant="outlined" className={classes.root}>
        <Box px={3} py={2}>
          <Typography variant="h6" align="center" margin="dense">
            Login
          </Typography>
          <Typography variant="inherit" color="textSecondary">
            {errors.non_field_errors?.message}
          </Typography>
          <Grid container spacing={1}>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Email"
                fullWidth
                margin="dense"
              />
              <Typography variant="inherit" color="textSecondary">
                {errors.email?.message}
              </Typography>
            </Grid>
            <Grid item xs={12} sm={12}>
              <TextField
                required
                label="Password"
                type="password"
                fullWidth
                margin="dense"
              />
              <Typography variant="inherit" color="textSecondary">
                {errors.password?.message}
              </Typography>
            </Grid>
          </Grid>

          <Box mt={3}>
            <Button
              variant="contained"
              color="primary"
              onClick={handleSubmit(onSubmit)}
            >
              Login
            </Button>
          </Box>
        </Box>
      </Paper>
    </Fragment>

我得到的是

Answer 1

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import Button from '@mui/material/Button';

export default function SimpleBackdrop() {
  const [open, setOpen] = React.useState(false);
  const handleClose = () => {
    setOpen(false);
  };
  const handleToggle = () => {
    setOpen(!open);
  };

  return (
    <div>
      <Button onClick={handleToggle}>Show backdrop</Button>
      <Backdrop
        sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
        open={open}
        onClick={handleClose}
      >
        <CircularProgress color="inherit" />
      </Backdrop>
    </div>
  );
}

文档管理系统

演示版

Answer 2

您应该使用 Material-ui 中的背景组件

https://material-ui.com/components/backdrop/