open | bool | false | If true, the component is shown. |
action | ref | - | A ref for imperative actions. It currently only supports updatePosition() action. |
anchorEl | HTMLElement | func | - | An HTML element, PopoverVirtualElement, or a function that returns either. 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 when setting the position of the popover. |
children | node | - | The content of the component. |
classes | object | - | Override or extend the styles applied to the component. |
container | HTMLElement | func | - | An 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. |
disableScrollLock | bool | false | Disable the scroll lock behavior. |
elevation | integer | 8 | The elevation of the popover. |
marginThreshold | number | 16 | Specifies how close to the edge of the window the popover can appear. If null, the popover will not be constrained by the window. |
onClose | func | - | Callback fired when the component requests to be closed. The reason parameter can optionally be used to control the response to onClose. |
slotProps | { paper?: func| object, root?: func | object } | - | The props used for each slot inside. |
slots | { paper?: elementType, root?: elementType } | - | The components used for each slot inside. |
sx | Array<func| object| bool>| func| object | - | The system prop that allows defining system overrides as well as additional CSS styles. |
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. |
TransitionProps | object | - | Props applied to the transition element. By default, the element is based on this Transition component. |
transitionDuration | 'auto'| number | { appear?: number, enter?: number, exit?: number } | auto | Set to 'auto' to automatically calculate transition time based on height. |
popoverWrapper | React.ReactElement | - | The custom React element used to wrap the popover. Allows for additional control or styling. |
popoverComponent | React.ReactElement | - | The React component used to render the popover. Enables flexibility for different popover content. |
className | string | - | The CSS class name to apply custom styles to the popover. |