我目前正在使用数据网格工具栏（Material-UI 数据网格组件的一项功能），因为我想要列显示/隐藏组件，但我也想以带有菜单的 IconButton 的形式添加我自己的菜单项单击时打开。问题是，当您单击所述按钮时，工具栏似乎会重新呈现，这会导致菜单失去其锚点并呈现在左上角。是否有一种特殊的方法可以在数据网格工具栏中获得锚点，以便菜单弹出器出现在正确的位置？
function CustomToolbar() {
return (
<GridToolbarContainer>
<Box
height="65px"
width="100%"
display="flex"
flexDirection="row"
justifyContent="center"
>
<Box width="300px" display="flex" justifyContent="flex-start" alignItems="center">
<GridToolbarColumnsButton sx={{ ml: 2 }} />
</Box>
<Box width="100%" alignSelf="center" textAlign="center">
<Typography sx={{ flex: "1 1 100%" }} variant="h6" component="div">
Title Goes Here
</Typography>
</Box>
<Box width="300px" display="flex" justifyContent="flex-end" alignItems="center">
<Tooltip title="Filter">
<IconButton
color="primary"
component="span"
disabled={loading}
sx={{ mr: 2 }}
onClick={handleMenuClick}
>
<FilterList />
</IconButton>
</Tooltip>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={() => handleClose(menuState, filters)}
transformOrigin={{ horizontal: "right", vertical: …