如何将Material-ui抽屉划分为页眉，主要和页脚部分？

Question

我使用实质性的UI抽屉，并希望将其分为3个部分：

• header =>＃固定在顶部
• main =>＃可滚动的最大部分
• footer =>＃固定在底部

所以我使用这个伪代码：

return (
        <Wrapper>
            <Drawer variant="permanent" anchor="right">                
                Header
            </Drawer>
            <Drawer variant="permanent" anchor="right">                
                Main
            </Drawer>
            <Drawer variant="permanent" anchor="right">
                Footer
            </Drawer>
        </Wrapper>
    );

最后，我希望抽屉如下： https://material-app.bootlab.io