Material ui 尝试让材质UI裁剪抽屉在flex布局中工作

我从clipped drawer示例代码开始，并尝试围绕它进行构建。在样本内部插入组件时（即，将“{”您认为水移动快吗？您应该看到冰“}替换为其他内容），内容受抽屉高度的限制。当尝试在样本外部插入内容时，所有内容都从抽屉下方开始

预期行为：能够将内容放置在抽屉周围的任何位置。我根据抽屉菜单选择隐藏/显示了不同的组件

---

我最初是从永久抽屉示例开始的，除了我需要将抽屉放在应用程序栏下方之外，其他一切都很好。

布局由一个包含

抽屉和主内容区的flex容器组成。内容区（
.appContent
）将展开以填充抽屉右侧（或左侧）的空间。您的所有内容都应放置在此元素中

更新：修复了IE 11的工作方式

基本结构：



Luke，感谢您对本说明和代码示例的详细介绍。现在我看到了它的实际应用，这让我感觉非常有意义。Hey Luke非常感谢它提供的代码示例。但是，我有一个固定的抽屉组件，我的appContent仍然没有填满可用空间，并且在左右两侧都留下了空白。我使用了与第一个示例完全相同的代码，因此我不确定我做错了什么：（@Annjawn，在CodeSandbox示例中，
.appContent
的
最大宽度
为
1200px
和
margin:0 auto
。因此，在大屏幕上，内容区域将被限制为
1200px
，并以右侧（或左侧）的空间为中心）抽屉的宽度。
.root
元素始终填充视口的整个宽度。如果从
.appContent
中删除
max width
，它将扩展到flex容器的全宽（抽屉旁边）。请让我知道这是否有帮助@LukePeavey，谢谢您的回复。真正的问题是我没有正确使用
MuiThemeProvider
。一旦我解决了这个问题，问题就消失了。@Quill感谢您的提醒。我将示例更新为最新的react版本。它们现在正在工作