Popper

Popper 组件让您创建工具提示和弹出框，以显示页面上元素的相关信息。

Popper API

导入

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

要了解差异，请阅读本指南，了解如何最大限度地减小捆绑包大小。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
open*	bool	-	如果为 `true`，则组件显示。
anchorEl	HTML 元素 \| object \| func	-	一个 HTML 元素，virtualElement，或一个返回其中之一的函数。它用于设置 popper 的位置。返回值将作为 Popper 实例的 reference 对象传递。
children	node \| func	-	Popper 渲染函数或节点。
container	HTML 元素 \| func	-	一个 HTML 元素或返回 HTML 元素的函数。`container` 将附加 portal 子节点。您还可以提供一个回调，该回调在 React 布局 effect 中调用。这使您可以从 ref 设置容器，并使服务器端渲染成为可能。默认情况下，它使用顶层 document 对象的 body，因此在大多数情况下它只是 `document.body`。
direction	'ltr' \| 'rtl'	'ltr'	文本方向。
disablePortal	bool	false	`children` 将位于父组件的 DOM 层次结构下。
keepMounted	bool	false	始终将子节点保留在 DOM 中。此 prop 在 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 位置。
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 元素的字符串或组件。有关更多详细信息，请参见下面的 Slots API。
transition	bool	false	帮助支持 react-transition-group/Transition 组件。

ref 被转发到根元素。

CSS 类

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

类名	描述
.base-Popper-root	应用于根元素的类名。