React Material UI菜单溢出

Question

如何在此处正确移动主要内容。看来我需要对剩余保证金进行一些动态计算，或者什么是最好的解决方案？

最初看起来不错：

但是当菜单展开时：

或调整页面大小时：

Answer 1

我不知道什么是最佳做法，但这就是我解决类似问题的方式。

假设您的内容如下所示。

<div class="main">
    <Menu class="menu" />
    <Content class="content" />
</div>

和样式：

.main {
    display: flex;
}

.menu {
    width: 10vw;
}

.content {
    width: 90vw;
}

.menu__open {
    width: 25vw;
}

.content__on-menu-open {
    width: 75vw;
}

打开菜单时设置了最后两个类。

PS：移动样式需要其他类别。

Answer 2

问题是我没有在正确的地方使用内容。

根据此处的答案：React Router V4 Implement NavLink inside a ListItem using Material UI

也可以通过使用

https://material-ui.com/components/drawers/#responsive-drawer

我能够解决此问题。基本上，我没有在正确的位置输出内容。