Popover API
API documentation for the React Popover component. Learn about the available props, and the CSS API.
Import
import Popover from '@mui/material/Popover';
// 或
import { Popover } from '@mui/material';Component name
The nameMuiPopover can be used when providing default props or style overrides in the theme.属性
Props of the Modal component are also available.
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| open* | bool | false | Control the popup` open state. |
| action | ref | A ref for imperative actions. It currently only supports updatePosition() action. | |
| anchorEl | HTML element | func | A HTML element, or a function that returns it. It's used to set the position of the popover. | |
| anchorOrigin | { horizontal: 'center' | 'left' | 'right' | number, vertical: 'bottom' | 'center' | 'top' | number } | { vertical: 'top', horizontal: 'left', } | This is the point on the anchor where the popover's anchorEl will attach to. This is not used when the anchorReference is 'anchorPosition'.Options: vertical: [top, center, bottom]; horizontal: [left, center, right]. |
| anchorPosition | { left: number, top: number } | This is the position that may be used to set the position of the popover. The coordinates are relative to the application's client area. | |
| anchorReference | 'anchorEl' | 'anchorPosition' | 'none' | 'anchorEl' | This determines which anchor prop to refer to to set the position of the popover. |
| children | node | The content of the component. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| container | HTML element | func | A HTML element, component instance, or function that returns either. The container will passed to the Modal component.By default, it uses the body of the anchorEl's top-level document object, so it's simply document.body most of the time. | |
| elevation | integer | 8 | The elevation of the popover. |
| marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. |
| onClose | func | Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose. | |
| PaperProps | { component?: element type } | {} | Props applied to the Paper element. |
| sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| transformOrigin | { horizontal: 'center' | 'left' | 'right' | number, vertical: 'bottom' | 'center' | 'top' | number } | { vertical: 'top', horizontal: 'left', } | This is the point on the popover which will attach to the anchor's origin. Options: vertical: [top, center, bottom, x(px)]; horizontal: [left, center, right, x(px)]. |
| TransitionComponent | elementType | Grow | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
| transitionDuration | 'auto' | number | { appear?: number, enter?: number, exit?: number } | 'auto' | Set to 'auto' to automatically calculate transition time based on height. |
| TransitionProps | object | {} | Props applied to the transition element. By default, the element is based on this Transition component. |
ref 则会被传递到根元素中。Inheritance
While not explicitly documented above, the props of the Modal component are also available on Popover. You can take advantage of this to target nested components.CSS
| Rule name | Global class | 描述 |
|---|---|---|
| root | .MuiPopover-root | Styles applied to the root element. |
| paper | .MuiPopover-paper | Styles applied to the Paper component. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.