Material UI Drawer 永久变体不起作用。移出位置

Question

我创建了一个 Material UI 屏幕。其中有这个结构

<div>
<Router>
  <Appbar>
  </Appbar>

  <Drawer>
  </Drawer>

  <main>
  </main>
</Router>
</div>

我为抽屉使用了 variant="permanent"。

问题：主标签内的内容是一个有很多列的大表格。我在 Drawer 类之外使用过它。但是当在表格容器的左侧水平滚动时，抽屉也随之向左移动。我正在使用永久变体，然后它也离开了。

关于这个的任何想法。我认为抽屉和主标签已附加，因此向左滚动表格，滚动它们。

Appbar 位置是固定的。试图使导航抽屉也被固定；这是样机的样子。

更新：将代码移至 Codepen https://1hi76.csb.app/

Answer 1

您可以将overflow: auto 设置为main 标签：

content: {
  flexGrow: 1,
  padding: theme.spacing(3),
  overflow: "auto"
}

Here is a sandbox