Antd V5如何将Notification置于Modal组件之上？

问题描述 #

使用 Antd 5 时，Notification 弹窗显示在 Modal 组件下方，需要将 Notification 置于 Modal 上方。

解决方案 #

1. 全局配置 Notification 层级 #

在项目入口或组件初始化阶段，通过 notification.config 设置更高的 zIndex，数值需大于你的 Modal（包括自定义的 StyledUsersModal）的层级：

import { notification } from 'antd';

// 在组件挂载或项目启动时执行
notification.config({
  zIndex: 10000, // 可根据实际情况调整，确保大于 Modal 的 zIndex
});

2. 局部调用时指定层级 #

如果仅需在特定场景调整，可在调用 openNotification 时直接传入 zIndex 参数：

openNotification({
  message: '操作提示',
  description: '这是一条显示在 Modal 上方的通知',
  zIndex: 10000,
});

3. 检查自定义 Modal 样式 #

若你使用的 StyledUsersModal 自定义了 z-index 样式，需确保其数值小于 Notification 设置的层级。例如修改自定义样式：

/* 假设使用 styled-components 定义 Modal */
const StyledUsersModal = styled(Modal)`
  z-index: 900; /* 确保小于 Notification 的 zIndex */
`;

4. 调整 contextHolder 位置 #

确保 contextHolder（Notification 挂载的容器）处于比 Modal 更高的层级位置，比如放在组件最外层：

<>
  {contextHolder}
  <StyledUsersModal
    open={isChangePasswordUsers}
    onOk={onChangePassword}
    footer={false}
    onCancel={handleChangePasswordUsersClose}
    title={messages['common.changePassword']}
  >
    <ChangePasswordForm
      selectUsers={selectUsers}
      onChangePassword={onChangePassword}
      handleChangePasswordUsersClose={handleChangePasswordUsersClose}
      openNotification={openNotification}
    />
  </StyledUsersModal>
</>

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