如何让Backdrop覆盖Popover？MUI遮罩层覆盖问题求助

问题核心是z-index层级优先级：MUI的Popover默认z-index为1300，而Backdrop默认z-index仅为1200，导致遮罩层被Popover压在下方。只需调整Backdrop的z-index，让它高于Popover即可解决。

修改代码中的Backdrop配置，调整其z-index值：

import * as React from 'react';
import Popover from '@mui/material/Popover';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import { Backdrop, CircularProgress } from '@mui/material';

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popover' : undefined;

  return (
    <div>
      <Backdrop
            sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.popover + 1 }}
            open={open}
            // onClick={handleClose}
            >
            <CircularProgress color="inherit" />
          </Backdrop>
      <Button aria-describedby={id} variant="contained" onClick={handleClick}>
        Open Popover
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
      >
        <Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
      </Popover>
      
    </div>
  );
}

补充说明 #

• theme.zIndex.popover是MUI主题预设的Popover层级值（默认1300），加1后Backdrop的z-index变为1301，就能覆盖在Popover之上。
• 你也可以直接写固定值1301，但使用主题变量的方式更适配MUI的主题系统，避免后续主题变更时出现层级冲突。

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