如何让Ant Design所有Modal保持相同透明度遮罩？

你遇到的核心问题是嵌套Modal时，主、子Modal的遮罩层叠加显示，两层rgba(0, 0, 0, 0.45)叠加后视觉上颜色更深。以下是几种实用的解决方法：

方法一：强制统一遮罩透明度 #

直接通过CSS覆盖所有Modal遮罩的背景色，固定为目标透明度，不受叠加影响：

/* 全局样式文件中添加 */
.ant-modal-mask {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

如果项目使用CSS Modules，需改用全局选择器：

:global(.ant-modal-mask) {
  background-color: rgba(0, 0, 0, 0.45) !important;
}

这种方式简单高效，所有Modal的遮罩都会保持统一的0.45透明度。

方法二：打开子Modal时隐藏主Modal遮罩 #

通过状态控制主Modal的遮罩显示，子Modal打开时隐藏主遮罩，避免叠加：

1. 在父组件中新增状态childModalVisible用于控制子Modal的显示
2. 修改主Modal的mask属性：

<Modal
  key={index}
  open={detailModalVisible}
  mask={!childModalVisible} // 子Modal打开时关闭主遮罩
  onCancel={(e) => {
    setDetailModalVisible(false);
    setCurrentBookingIndex(null);
  }}
  footer={null}
>
  <EachBooking
    key={currentBookingIndex}
    selectedBooking={selectedBooking}
    roomId={selectedRoomId}
    roomName={selectedRoomName}
    username={username}
    toPreviousMainModal={toPreviousMainModal}
    // 传递控制子Modal状态的方法
    onChildModalOpen={() => setChildModalVisible(true)}
    onChildModalClose={() => setChildModalVisible(false)}
  />
</Modal>

此时子Modal打开时仅显示自身遮罩，颜色保持默认的0.45透明度。

方法三：将子Modal挂载到body节点 #

AntD Modal默认挂载到当前组件父节点，嵌套时会导致遮罩层级叠加。通过getContainer属性把子Modal挂载到body上，避免嵌套：
在EachBooking组件的子Modal中添加配置：

<Modal
  open={visible}
  getContainer={() => document.body}
  // 其他属性
>
  {/* 子Modal内容 */}
</Modal>

搭配方法一的样式覆盖，能彻底解决遮罩叠加问题。

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