容器内的 Material-ui 抽屉

Question

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

我将我的应用页面包装在最大宽度为 600 像素的容器中。我想将抽屉设置为开始进入该容器而不是正文页面 (picture)。我使用应用栏位置作为绝对位置来实现滚动事件，所以不想更改它。

这里是代码框示例代码：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%',
  },

结果将是：

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

Here您的代码已修改。