PopperAPI

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

演示

有关此 React 组件用法的示例和详细信息，请访问组件演示页面

导入

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

通过阅读这篇关于最小化 bundle size 的指南，了解它们之间的区别。

属性

原生组件的属性也可用。

名称	类型	默认值	描述
open*	bool	-	如果为 `true`，则组件显示。
anchorEl	HTML 元素 \| object \| func	-	一个 HTML 元素，virtualElement，或一个返回其中之一的函数。它用于设置 popper 的位置。返回值将作为 Popper 实例的引用对象传递。
children	node \| func	-	Popper 渲染函数或节点。
component	elementType	-	用于根节点的组件。可以使用 HTML 元素的字符串或组件。
components	{ Root?: elementType }	{}	用于 Popper 内部每个插槽的组件。可以使用 HTML 元素的字符串或组件。已弃用－请使用 `slots` 属性代替。此属性将在 v7 中移除。如何迁移。
componentsProps	{ root?: func \| object }	{}	用于 Popper 内部每个插槽的 props。已弃用－请使用 `slotProps` 属性代替。此属性将在 v7 中移除。如何迁移。
container	HTML 元素 \| func	-	一个 HTML 元素或返回一个 HTML 元素的函数。`container` 将会附加 portal children。您也可以提供一个回调函数，该函数在 React 布局 effect 中被调用。这允许您从 ref 设置 container，并使服务器端渲染成为可能。默认情况下，它使用顶级文档对象的 body，因此在大多数情况下它只是 `document.body`。
disablePortal	bool	false	`children` 将位于父组件的 DOM 层次结构下。
keepMounted	bool	false	始终将 children 保留在 DOM 中。此属性在 SEO 情况或当您想要最大化 Popper 的响应性时可能很有用。
modifiers	Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' \| 'afterRead' \| 'afterWrite' \| 'beforeMain' \| 'beforeRead' \| 'beforeWrite' \| 'main' \| 'read' \| 'write', requires?: Array<string>, requiresIfExists?: Array<string> }>	-	Popper.js 基于“插件式”架构，其大多数功能都完全封装在“modifiers”中。 modifier 是一个函数，每次 Popper.js 需要计算 popper 的位置时都会调用该函数。因此，modifier 应该非常高效，以避免瓶颈。要了解如何创建 modifier，请阅读 modifiers 文档。
placement	'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top'	'bottom'	Popper placement。
popperOptions	{ modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' \| 'auto-start' \| 'auto' \| 'bottom-end' \| 'bottom-start' \| 'bottom' \| 'left-end' \| 'left-start' \| 'left' \| 'right-end' \| 'right-start' \| 'right' \| 'top-end' \| 'top-start' \| 'top', strategy?: 'absolute' \| 'fixed' }	{}	提供给 `Popper.js` 实例的选项。
popperRef	ref	-	指向所用 popper 实例的 ref。
slotProps	{ root?: func \| object }	{}	用于 Popper 内部每个插槽的 props。
slots	{ root?: elementType }	{}	用于 Popper 内部每个插槽的组件。可以使用 HTML 元素的字符串或组件。
sx	Array<func \| object \| bool> \| func \| object	-	系统属性，允许定义系统 overrides 以及其他 CSS 样式。有关更多详细信息，请参阅 `sx` 页面。
transition	bool	false	帮助支持 react-transition-group/Transition 组件。

ref 被转发到根元素。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们会应用于组件的插槽。

类名	规则名称	描述
.MuiPopper-root	root	应用于根元素的类名。

您可以使用以下自定义选项之一来覆盖组件的样式

使用全局类名。
使用作为组件styleOverrides 属性（在自定义主题中）一部分的规则名称。

源代码

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