MUI Popover点击后页面宽度异常偏移问题求助

问题描述 #

页面中的用户ID Popover组件点击后，页面会被撑宽并出现多余空白区域，未点击时页面显示正常。

调整方案 #

1. 优化Popover组件的定位与样式 #

修改BasicPopover组件，调整Popover定位属性、限制宽度，并清除列表默认样式：

import * as React from "react";
import Popover from "@mui/material/Popover";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import { IconButton } from "@mui/material";
import navStyles from "../styles/Nav.module.css";

export default function BasicPopover() {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <IconButton
        aria-describedby={id}
        variant="contained"
        onClick={handleClick}
      >
        <AccountCircleIcon className={navStyles.pfp} />
      </IconButton>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        // 添加定位原点，确保弹出框锚定正确位置
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        // 限制弹出框宽度并调整内部容器样式
        sx={{
          maxWidth: '100%',
          '& .MuiPopover-paper': {
            padding: 0,
            overflow: 'hidden',
            minWidth: '160px',
          }
        }}
      >
        {/* 移除多余Typography组件，直接渲染列表并清除默认样式 */}
        <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
          <li style={{ padding: '8px 16px', cursor: 'pointer' }}>Login/Logout</li>
          <li style={{ padding: '8px 16px', cursor: 'pointer' }}>Account</li>
          <li style={{ padding: '8px 16px', cursor: 'pointer' }}>Your Trips</li>
          <li style={{ padding: '8px 16px', cursor: 'pointer' }}>Help</li>
          <li style={{ padding: '8px 16px', cursor: 'pointer' }}>Settings</li>
        </ul>
      </Popover>
    </div>
  );
}

2. 修复导航栏容器样式 #

修改Nav.module.css中的.nav类，确保导航栏不会被内部元素撑开：

.nav {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  /* 保留原有其他样式 */
}

关键说明 #

• transformOrigin：配合anchorOrigin控制弹出框的显示位置，避免弹出框超出页面边界导致页面撑宽。
• 清除列表默认样式：原生ul自带的margin和padding会额外增加弹出框宽度，移除后可避免不必要的宽度溢出。
• maxWidth: '100%'：限制弹出框最大宽度为视口宽度，防止其超出页面范围。

内容的提问来源于stack exchange，提问作者lams