Material-ui 容器内的抽屉

Question

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

我将我的应用程序页面包装在最大宽度为 600 像素的容器中。 我想将抽屉设置为从那个容器开始，而不是在正文页面（图片）中。 我使用 app bar position 作为滚动事件的绝对实现，所以不想更改它。

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

我在这里找到了关于它的讨论，但我没有弄清楚如何让它在我的示例中工作。 从那我试过：

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

Answer 1

再见，考虑到您将drawerPaper设置为absolute position，我认为您唯一能做的就是将样式设置为：

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

结果将是：

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

此处您的代码已修改。