reactjs - 材质 UI 固定 MenuItem

Question

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

这是结构：

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

我试图将标题菜单项的位置设置为固定，但它会抛出页面的整个菜单顶部。

header: {
   position: 'fixed',
},

编辑：清除一下我正在寻找的东西。GitHub 有同样的菜单：

Answer 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>
  );
}

这是一个沙盒链接
，这是添加 z-index 后的结果：