跳到主要内容跳到主要内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

弹出框 (Popover)API

React Popover 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示 (Demos)

导入 (Import)

import Popover from '@mui/material/Popover';
// or
import { Popover } from '@mui/material';

通过阅读关于最小化捆绑包大小的指南来了解差异。

Props

Modal 组件的 props 也可用。

名称 (Name)类型 (Type)默认值 (Default)描述 (Description)
open*bool-

如果为 true，则组件显示。

actionref-

用于命令式操作的 ref。目前仅支持 updatePosition() 操作。

anchorElHTML 元素
| func		-

HTML 元素，PopoverVirtualElement，或返回其中之一的函数。它用于设置弹出框的位置。

anchorOrigin{ horizontal: 'center'
| 'left'
| 'right'
| number, vertical: 'bottom'
| 'center'
| 'top'
| number }		{ vertical: 'top', horizontal: 'left', }

这是锚点上的点，弹出框的 anchorEl 将附着到该点。当 anchorReference 为 'anchorPosition' 时，不使用此项。
选项：vertical: [top, center, bottom]; horizontal: [left, center, right]。

anchorPosition{ left: number, top: number }-

这是可用于设置弹出框位置的位置。坐标相对于应用程序的客户端区域。

anchorReference'anchorEl'
| 'anchorPosition'
| 'none'		'anchorEl'

这决定了在设置弹出框位置时要参考哪个锚点 prop。

BackdropComponentelementTypestyled(Backdrop, { name: 'MuiModal', slot: 'Backdrop', overridesResolver: (props, styles) => { return styles.backdrop; }, })({ zIndex: -1, })

幕布组件。此 prop 启用自定义幕布渲染。

BackdropPropsobject-

应用于 Backdrop 元素的 props。

childrennode-

组件的内容。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参见下方的 CSS 类 API。

containerHTML 元素
| func		-

HTML 元素、组件实例或返回其中之一的函数。container 将传递给 Modal 组件。
默认情况下，它使用 anchorEl 的顶层文档对象的 body，因此在大多数情况下它只是 document.body。

disableScrollLockboolfalse

禁用滚动锁定行为。

elevationinteger8

弹出框的海拔高度。

marginThresholdnumber16

指定弹出框可以靠近窗口边缘的程度。如果为 null，则弹出框将不受窗口约束。

onClosefunc-

当组件请求关闭时触发的回调。reason 参数可以选择性地用于控制对 onClose 的响应。

PaperProps{ component?: element type }{}

应用于 Paper 元素的 props。
此 prop 是 slotProps.paper 的别名，如果两者都使用，则将被其覆盖。

slotProps{ backdrop?: func
| object, paper?: func
| object, root?: func
| object, transition?: func
| object }		{}

用于内部每个 slot 的 props。

slots{ backdrop?: elementType, paper?: elementType, root?: elementType, transition?: elementType }{}

用于内部每个 slot 的组件。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统 overrides 以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参见 `sx` 页面。

transformOrigin{ horizontal: 'center'
| 'left'
| 'right'
| number, vertical: 'bottom'
| 'center'
| 'top'
| number }		{ vertical: 'top', horizontal: 'left', }

这是弹出框上将附着到锚点原点的点。
选项：vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]。

TransitionComponentelementType增长 (Grow)

用于过渡的组件。请遵循本指南以了解有关此组件要求的更多信息。

transitionDuration'auto'
| number
| { appear?: number, enter?: number, exit?: number }		'auto'

设置为 'auto' 以根据高度自动计算过渡时间。

TransitionPropsobject{}

应用于过渡元素的 props。默认情况下，该元素基于此 Transition 组件。

ref 被转发到根元素。

继承 (Inheritance)

虽然上面没有明确文档说明，但 Modal 组件的 props 在 Popover 中也可用。您可以利用这一点来定位嵌套组件。

Slots

Slot 名称 (Slot name)类名 (Class name)默认组件 (Default component)描述 (Description)
root.MuiPopover-root模态框 (Modal)用于 root slot 的组件。
paper.MuiPopover-paper纸张 (Paper)用于 paper slot 的组件。
transition增长 (Grow)用于 transition slot 的组件。
backdrop幕布 (Backdrop)用于 backdrop slot 的组件。

源代码 (Source code)

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。