材质 UI 固定 MenuItem答案

【问题标题】：Material UI fixed MenuItem材质 UI 固定 MenuItem
【发布时间】：2021-02-04 08:12:52
【问题描述】：

我想知道是否有可能将固定的 MenuItem 添加到菜单中？我想使用其中一个 MenuItems 来显示标题。另外，如果有其他解决方案，我也愿意尝试。

结构如下：

<Menu>
    <MenuItem className={classes.header}>This is header</MenuItem>
    <MenuItem>Item</MenuItem>
    <MenuItem>Item</MenuItem>
    <MenuItem>Item</MenuItem>
</Menu>

我尝试将标题 MenuItem 的位置设置为固定，但它会将整个菜单置于页面顶部。

header: {
   position: 'fixed',
},

编辑：澄清一下我在寻找什么。 GitHub 也有类似的菜单：

【问题讨论】：

这对我来说真的没有任何意义。固定位置意味着“当用户滚动或类似的东西时不要移动”它将如何应用于 MenuItems？您的意思是“在任何其他事物之前（顶部）显示它”？
我想使用第一个 MenuItem 来显示菜单的标题，下一个 MenuItems 是实际项目。在我的项目中实际上有将近 30 个项目，所以菜单是可滚动的，但我想保持标题在顶部。
你想让它看起来像一张桌子吗？
好的。现在它更有意义了。我认为拥有一个可滚动的Menu 并不是一个好主意。但出于任何原因；这可能最适合您的使用。但是，如果您的菜单那么长，请尝试使用其他小部件。
我在原始帖子中添加了图片以清除我正在寻找的内容

标签： reactjs material-ui

【解决方案1】：

您可以使用position sticky，但由于这个问题，您也需要“调整”z-index：

所以你可以做这样的事情（基于材料 ui 示例）：

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";
import MoreVertIcon from "@material-ui/icons/MoreVert";

import { Paper, TextField } from "@material-ui/core";
const useStyles = makeStyles({
  header: {
    position: "sticky",
    top: 0,
    backgroundColor: "white",
     zIndex: 2
  },
  search: {
    marginBottom: "5px",
    
  },
  card: {
    width: "100%"
  }
});

const options = [
  "None",
  "Atria",
  "Callisto",
  "Dione",
  "Ganymede",
  "Hangouts Call",
  "Luna",
  "Oberon",
  "Phobos",
  "Pyxis",
  "Sedna",
  "Titania",
  "Triton",
  "Umbriel"
];

const ITEM_HEIGHT = 48;

export default function LongMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const classes = useStyles();
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

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

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true"
        onClick={handleClick}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        elevation={1}
        className={classes.menu}
        id="long-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
        PaperProps={{
          style: {
            maxHeight: ITEM_HEIGHT * 4.5,
            width: "800px",
            backgroundColor: "white"
          }
        }}
      >
        <div className={classes.header}>
          <Paper className={classes.card} elevation={3}>
            <TextField
              className={classes.search}
              label={"search filter"}
              variant={"outlined"}
            ></TextField>
          </Paper>
        </div>
        {options.map((option) => (
          <MenuItem
            key={option}
            selected={option === "Pyxis"}
            onClick={handleClose}
          >
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

这里是sandbox link
这是添加 z-index 后的结果：

【讨论】：

谢谢，这个非常完美。首先，我尝试将 z-index 设置为菜单项，但由于某种原因，这并没有解决问题。
为 z-index 尝试不同的数字。低值和高值。