跳转到内容

Popper API

API documentation for the React Popper component. Learn about the available props, and the CSS API.

Import

import Popper from '@mui/material/Popper';
// 或
import { Popper } from '@mui/material';
You can learn about the difference by reading this guide on minimizing bundle size.

属性

Props of the 原生(Native) component are also available.

名称类型默认值描述
open*boolfalse
anchorElHTML element
| object
| func
childrennode
| func
Popper render function or node.
containerHTML element
| func
direction'ltr'
| 'rtl'
'ltr'
disablePortalboolfalse
keepMountedboolfalse
modifiersArray<{ 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> }>
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'
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' }
{}
popperRefref
transitionboolfalse

ref 则会被传递到根元素中。

Demos