ReactJS Material-UI 如何实现锚点菜单顶部组件固定不随滚动消失

你遇到的问题是因为直接放在Menu内部的元素默认属于滚动内容的一部分，放在Menu外部的元素不属于菜单弹出层的渲染范围，所以两种写法都达不到预期，以下是两种可行的实现方案：

方案1：使用sticky定位固定顶部元素（改造成本最低） #

直接给需要固定的顶部元素添加粘性定位属性，利用Menu内部滚动容器作为父容器，即可实现滚动时固定效果，代码修改如下：

const renderMenu = () => {
  const items = [];
  for (let i = 0; i < 20; i += 1) {
    items.push(`Item ${i + 1}`);
  }
  return (
    <Menu
      id="simple-menu"
      anchorEl={anchorEl}
      keepMounted
      PaperProps={{
        style: {
          maxHeight: "200px"
        }
      }}
      open={Boolean(anchorEl)}
      onClose={handleClose}
    >
      {/* 固定头部区域 */}
      <div style={{
        position: 'sticky',
        top: 0,
        backgroundColor: '#fff', // 和菜单背景色保持一致
        padding: '10px 16px',
        zIndex: 1,
        borderBottom: '1px solid #f0f0f0' // 可选，加分隔线区分
      }}>
        Test two
      </div>
      {items.map((item) => (
        <MenuItem onClick={handleClose}>{item}</MenuItem>
      ))}
    </Menu>
  );
};

注意：如果使用了暗色主题，需要将backgroundColor改为对应主题下的菜单背景色，避免透明导致文字重叠。

方案2：自定义Menu的Paper容器（可控性最高） #

如果固定头部需要承载搜索框、筛选按钮等复杂交互，推荐自定义Menu的Paper组件，显式拆分固定头部和滚动内容区域，结构更清晰，不易出现样式冲突：

// 自定义Paper组件，拆分固定头部和滚动区域
const CustomMenuPaper = (props) => {
  return (
    <Paper {...props} elevation={8}>
      {/* 固定头部区域 */}
      <div style={{
        padding: '10px 16px',
        borderBottom: '1px solid #f0f0f0'
      }}>
        Test two
      </div>
      {/* 可滚动的菜单项容器，单独设置maxHeight */}
      <div style={{ maxHeight: '160px', overflow: 'auto' }}>
        {props.children}
      </div>
    </Paper>
  )
}

const renderMenu = () => {
  const items = [];
  for (let i = 0; i < 20; i += 1) {
    items.push(`Item ${i + 1}`);
  }
  return (
    <Menu
      id="simple-menu"
      anchorEl={anchorEl}
      keepMounted
      // 替换默认Paper为自定义组件
      PaperComponent={CustomMenuPaper}
      open={Boolean(anchorEl)}
      onClose={handleClose}
    >
      {items.map((item) => (
        <MenuItem onClick={handleClose}>{item}</MenuItem>
      ))}
    </Menu>
  );
};

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