Function default

A reusable themed popover component that wraps MUI's Popover.

Remarks

This component provides a styled wrapper around the Material-UI Popover, integrating with the application's theme system for consistent background colors. It automatically determines whether it is open based on the presence of anchorEl.

Example

const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
};

const handleClose = () => {
setAnchorEl(null);
};

return (
<>
<Button title="Open Popover" onClick={handleClick} />
<Popover
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
>
<Box padding={2}>
<Text>The content of the Popover.</Text>
</Box>
</Popover>
</>
);

Settings

Member Visibility