出现滚动条时 MUI 弹出框未对齐

Question

我正在使用链接到图标的 MUI Popover。当用户使用该图标时，Popver 将打开，用户有两个选项。我还添加了一个临时向上箭头连接到此弹出窗口。问题是，如果图标以任何方式移动（即放大屏幕或浏览器添加滚动条），我的弹出窗口将不再与图标对齐。我添加了放大的页面图像，显示代码正在执行的操作。不知道如何解决这个问题。

    <Popover
    open={avatarMenuOpen}
    anchorEl={anchorEl}
    onClose={handleAvatarMenuClose}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center'
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center'
    }}
    slotProps={{
      paper: {
        sx: {
          backgroundColor: 'transparent',
          minWidth: '317px'
        }
      }
    }}
  >
    <Box
      sx={{
        position: 'relative',
        mt: '10px',
        '&::before': {
          backgroundColor: 'white !important',
          content: '""',
          display: 'block',
          position: 'absolute',
          width: 12,
          height: 12,
          top: -6,
          transform: 'rotate(45deg)',
          right: isMobile ? 'calc(9% - 6px)' : 'calc(7% - 2px)',
          borderTop: `1px solid ${palette.grey[200]}`,
          borderLeft: `1px solid ${palette.grey[200]}`
        }
      }}
    />
    <Box
      sx={{
        p: 2,
        backgroundColor: 'white !important',
        boxShadow: '0px 4px 18px rgba(97, 97, 97, 0.1)'
      }}
    >
      <MenuItem
        component={ReactRouterLink}
        onClick={handleAvatarMenuClose}
        to={'/my-profile'}
      >
        <AirplanemodeActive color='error' />
        <Typography sx={{ paddingLeft: '12px' }}>Location 1</Typography>
      </MenuItem>
      <MenuItem onClick={handleLogOut}>
        <AirplanemodeActive color='primary' />
        <Typography sx={{ paddingLeft: '12px' }}>Location 2 </Typography>
      </MenuItem>
    </Box>
  </Popover>

Answer 1

解决了。发布解决方案，以防其他人将来遇到此问题。我的问题是在不同的框中使用向上箭头 CSS 和弹出框 CSS 的整体外观。一旦我将所有逻辑移至弹出窗口，弹出窗口就会随着屏幕尺寸的变化而移动

 <Popover
        open={avatarMenuOpen}
        anchorEl={anchorEl}
        onClose={handleAvatarMenuClose}
        anchorOrigin={{ horizontal: 40, vertical: 'bottom' }}
        transformOrigin={{ horizontal: 'right', vertical: -10 }}
        slotProps={{
          paper: {
            sx: {
              overflow: 'visible',
              backgroundColor: `${palette.white.main} !important`,
              borderRadius: '16px',
              boxShadow: '0px 4px 18px rgba(97, 97, 97, 0.1)',
              border: `1px solid ${palette.grey[200]}`,
              minWidth: '317px',

              '&:before': {
                content: '""',
                display: 'block',
                position: 'absolute',
                top: -1,
                right: 20,
                width: 12,
                height: 12,
                backgroundColor: 'inherit',
                transform: 'translateY(-50%) rotate(45deg)'
              }
            }
          }
        }}
      >
 <Box
  sx={{
    p: 2,
  }}
>
  <MenuItem
    component={ReactRouterLink}
    onClick={handleAvatarMenuClose}
  >
    <AirplanemodeActive color='error' />
    <Typography sx={{ paddingLeft: '12px' }}>Location 1</Typography>
  </MenuItem>
  <MenuItem onClick={handleLogOut}>
    <AirplanemodeActive color='primary' />
    <Typography sx={{ paddingLeft: '12px' }}>Location 2 </Typography>
  </MenuItem>
</Box>