AppBar 元素内的抽屉渲染

Question

我创建了一个容器来将我的应用程序的宽度限制为 600 像素（sm），但是当我这样做时，抽屉坏了。不是在容器页面端渲染，而是在appBar里面。

当宽度超过 600px（页面限制）时，抽屉在 appBar 内渲染（picture incorrect）。当页面小于 600px 时，它会正确呈现 (picture correct)。

我正在使用 material-ui 组件，应用栏的位置是绝对的，因为我正在实现滚动事件。要集中我使用的应用栏：

    maxWidth: 600,
    [theme.breakpoints.up("sm")]: {
      left: "50%",
      transform: "translate(-50%, 0)"
    }

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

Answer 1

你应该用 AppBar 而不是它的孩子来做抽屉兄弟

return (
  <div className={classes.grow}>
    <AppBar className={classes.app_bar}>
      ...
    </AppBar>
    {renderDrawer}
  </div>
);