容器内的 Material-ui 抽屉

Question

如何在reactjs中的容器内设置material-ui抽屉？

我将应用程序页面包装在最大宽度为 600px 的容器中。我想将抽屉设置为从该容器开始，而不是在正文页面中（）。我使用应用程序栏位置作为绝对位置来实现滚动事件，因此不想更改它。

这里是codesandbox示例代码：https://codesandbox.io/s/material-drawer-e6vrc?file=/header.js

我找到了关于它的讨论here，但我没有弄清楚如何使其在我的示例中发挥作用。从我尝试过：

        ModalProps={{
          container: document.getElementById("appContainerDiv"),
          style: { position: "absolute" }
        }}

Answer 1

Ciao，考虑到你将

drawerPaper

设置为

absolute

位置，我认为你唯一能做的就是将你的风格设置为：

drawerPaper: {
    minWidth: 100,
    width: "20%",
    position: "absolute",
    right: '12%',
    height: '75%',
  },

结果将是：

请注意，此解决方案没有响应！

这里您的代码已修改。