Ant Design Drawer组件mask={false}与maskClosable={true}冲突问题及解决方法咨询

数据老陈

2026-8-2

解决Ant Design Drawer移除遮罩仍可点击关闭的问题

方案一：保留遮罩并设置为透明（推荐）

保持mask={true}和maskClosable={true}，通过CSS将遮罩改为完全透明，既保留点击遮罩关闭的功能，又看不到深色遮罩。

修改后的Drawer代码：

<div>
  <Drawer
    className="add-days-modal"
    placement="right"
    closable={false}
    onClose={props.handleCancel}
    visible={props.addDayModalVisible}
    key="right"
    width="500px"
    maskClosable={true}
    mask={true} // 恢复为true
  >
    {props.content}
  </Drawer>
</div>

对应的CSS样式：

全局样式：直接覆盖Ant Design的遮罩类

.ant-drawer-mask {
  background-color: transparent !important;
}

局部样式（避免全局污染）：使用深度选择器

/* CSS Modules 或 scoped 样式中 */
:global(.ant-drawer-mask) {
  background-color: transparent;
}

精准定位当前Drawer的遮罩：

.add-days-modal + .ant-drawer-mask {
  background-color: transparent;
}

方案二：自定义透明点击层

如果不想依赖Ant Design的遮罩组件，可自行在左侧区域添加全屏透明点击层，点击时触发关闭事件。

代码示例：

<div style={{ position: 'relative' }}>
  {/* 自定义左侧透明点击层 */}
  {props.addDayModalVisible && (
    <div 
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: '500px', // 与Drawer宽度一致，仅覆盖左侧区域
        bottom: 0,
        zIndex: 1000, // 低于Drawer默认z-index（1001），不遮挡Drawer交互
        cursor: 'pointer'
      }}
      onClick={props.handleCancel}
    />
  )}
  
  <Drawer
    className="add-days-modal"
    placement="right"
    closable={false}
    onClose={props.handleCancel}
    visible={props.addDayModalVisible}
    key="right"
    width="500px"
    maskClosable={false}
    mask={false}
  >
    {props.content}
  </Drawer>
</div>