Material-UI：将顶部抽屉定位在顶部应用栏下方

Question

我想在顶部应用程序栏下方放置一个顶部抽屉以用于导航目的。根据API文档，当variant=“temporary”时，Drawer具有Modal组件的所有属性。属性“disablePortal”应该会导致所需的行为，但它不起作用：

子组件将位于父组件的 DOM 层次结构下。

到目前为止我尝试过的：

• 在抽屉中设置disablePortal
• 通过 Drawer 的 ModalProps 属性设置disablePortal
• 创建一个 ref 并将 Drawer 的容器属性设置为其当前值

我不想要什么：

• 在顶部应用栏中使用 Accordion，因为我认为这不是正确的解决方案
• 调整 z 索引
• 使用一些高度技巧（使用顶部应用栏的高度值定位抽屉）

https://mui.com/material-ui/api/drawer/

最小工作示例：

https://codesandbox.io/s/stupefied-cache-7y6qmv

import { AppBar, Box, Drawer, IconButton, Toolbar } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { useState } from "react";

export default function App() {
  const [showNavigation, setShowNavigation] = useState(false);
  return (
    <Box>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            aria-label="menu"
            onClick={() => setShowNavigation((prev) => !prev)}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer
        anchor="top"
        open={showNavigation}
        onClose={() => setShowNavigation(false)}
        disablePortal
      >
        Test
      </Drawer>
    </Box>
  );
}

Answer 1

我尝试了这个并且它有效：

import { AppBar, Box, Drawer, IconButton, Toolbar } from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import { makeStyles } from "@mui/styles";
import { useState } from "react";

const useStyles = makeStyles({
  root: {
    position: "relative !important",
    "& .MuiBackdrop-root": {
      position: "relative !important",
      height: "100vh"
    }
  },
  paper: {
    position: "absolute !important"
  }
});

export default function App() {
  const [showNavigation, setShowNavigation] = useState(false);
  const classes = useStyles();
  return (
    <Box>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            size="large"
            edge="start"
            aria-label="menu"
            onClick={() => setShowNavigation((prev) => !prev)}
          >
            <MenuIcon />
          </IconButton>
        </Toolbar>
      </AppBar>
      <Drawer
        anchor="top"
        open={showNavigation}
        onClose={() => setShowNavigation(false)}
        disablePortal
        classes={{
          paper: classes.paper,
          root: classes.root,
        }}
      >
        Test
      </Drawer>
    </Box>
  );
}

沙盒演示：https://codesandbox.io/s/mui-top-drawer-disableportal-bug-forked-ic8ql9? file=/src/App.js