背景蒙层 Mask
深色背景层。
安装
npm install antd-mobile@5.43.0
antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 unstableSetRender 注册 createRoot，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 <html data-prefers-color-scheme="dark"> 切换。
示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 DemoBlock 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。
深色背景层。
何时使用
常用于模态窗口的背景层，使视觉焦点突出在模态窗口本身。
示例
Mask
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| afterClose | 完全关闭后触发 | () => void | - |
| afterShow | 完全展示后触发 | () => void | - |
| color | 背景蒙层的颜色 | 'black' | 'white' | string | 'black' |
| destroyOnClose | 不可见时是否销毁 DOM 结构 | boolean | false |
| disableBodyScroll | 是否禁用 body 滚动 | boolean | true |
| forceRender | 强制渲染内容 | boolean | false |
| getContainer | 指定挂载的 HTML 节点，如果为 null 的话，会渲染到当前节点 | HTMLElement | () => HTMLElement | null | null |
| onMaskClick | 点击蒙层自身触发 | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
| opacity | 透明度 | 'default' | 'thin' | 'thick' | number | 'default' |
| stopPropagation | 阻止某些事件的冒泡 | PropagationEvent[] | ['click'] |
| visible | 是否可见 | boolean | true |
CSS 变量
| 属性 | 说明 | 默认值 | 全局变量 |
|---|---|---|---|
| --z-index | 元素的 z-index | 1000 | --adm-mask-z-index |