带有材质UI的响应式抽屉

Question

我正在此处Material UI Drawer中的示例中进行操作。抽屉扩展时，内容将相应缩小。但是，我使用的是布局文件，我希望AppBar的抽屉与内容分开。

这是我的布局文件。

const Layout = ({ children }) => {
  const classes = useStyles();
  const theme = useTheme();

  return (
    <div className="App">
      <MenuAppBar />
      {children}
    </div>
  );
};

export default Layout;

这是代码的一部分，当扩展抽屉时，其中的内容将调整大小。如果我的内容在代码的这一部分内，则可以使用。但是我想像我在布局文件中所做的那样，将其与AppBar分离。

<main className={classes.content}>
<div className={classes.toolbar} />
   Content goes here
</main>

当我尝试将main和div及其与之关联的样式复制到布局文件时，我无法实现效果。