如何在Next.js单页面中实现多个Material-UI Modal独立打开并解决z-index遮挡问题

问题根因 #

• MUI Dialog默认根容器为全屏固定定位，即使开启hideBackdrop，全屏的根容器依然会拦截下层点击事件，导致无法点到被遮挡的触发按钮
• 单组件独立维护zIndex的逻辑会出现多Modal层级冲突，无法保证最新激活的Modal永远在最上层
• 代码中left属性值的百分号前多了空格，会导致定位样式失效

修复方案 #

1. 修改Dialog根容器样式，取消全屏拦截 #

给Dialog根容器设置pointerEvents: 'none'，仅让Dialog内容区域响应点击，这样根容器不会拦截下层按钮的点击事件：

function PaperComponent(props: PaperProps) {
    return (
        <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
            <Paper {...props} />
        </Draggable>
    );
}

const [zIndex, setZIndex] = useState<number>(5000);
const [open, setOpen] = useState(false);
const handleClose = () => {
    setOpen(false);
};
// 点击Modal时提升当前Modal层级
const handleZIndex = () => {
    setZIndex(prev => prev + 1)
}

<Button style={{
                textTransform: 'lowercase',
                width: '100%',
                minHeight: 100,
                marginBottom: '2px',
                padding: '-5px'
            }} variant="outlined" color="primary" onClick={handleClickOpen}>
                {simplifyStrategy(strategy)}
</Button>

<Dialog
                open={open}
                onClose={handleClose}
                PaperComponent={PaperComponent}
                onClick={handleZIndex}
                disableEnforceFocus
                hideBackdrop
                disableBackdropClick
                aria-labelledby="draggable-dialog-title"
                maxWidth={'md'}
                fullWidth={true}
                // 新增sx配置取消根容器点击拦截
                sx={{
                  pointerEvents: 'none',
                  '& .MuiDialog-paper': {
                    pointerEvents: 'auto'
                  }
                }}
                style={{
                    top: '85%',
                    left: `${Math.floor(Math.random() * 100)}%`, // 移除百分号前多余空格
                    height: 'fit-content',
                    width: 'fit-content',
                    zIndex: zIndex // 绑定当前层级
                }}
            >
</Dialog>

2. 多Modal场景zIndex优化 #

如果页面存在多个Modal实例，建议把zIndex提升逻辑放到父层统一管理：

• 父组件维护全局递增的globalZIndex状态，初始值设为5000
• 每个Modal组件接收onActive props，点击Modal时调用该方法获取最新的全局zIndex，赋值给当前Modal的层级
  即可保证所有激活的Modal都会自动拿到最高层级，不会出现层级遮挡问题。

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