如何修复Material UI列网格剪辑​​其子组件并将其分为2列？

问题描述

这是我针对此问题的沙箱：https://codesandbox.io/s/gridscroll-cdsqw?file=/src/SignUp.jsx

网格列（在SlideInDrawer.jsx中的第74行定义）在视觉上并没有变成我想要的样子。这样做有几个问题：

1. 当我将“网格高度”设置为80％（同一文件的第30行）时，“版式”会自动分成另一列。我希望高度为80％，以便在视口宽度较小时，网格的内容不会与关闭按钮冲突。我应该如何使印刷术保持在表格的顶部？我尝试过nowrap，但没有用。

2. 即使版式位于正确的位置，由于TextField阴影的负边距，对于每个TextField右侧的一小部分阴影，仍然会有水平滚动。在保持所有内容（包括TextField和它们的boxShadows）可见的同时，如何摆脱水平滚动？

3. 现在，即使在表单顶部应该有一个用于“ Email”的字段，Grid也会剪切出第一个TextField。我该如何解决？

总而言之，我如何使所有内容按正确的顺序可见并且没有水平滚动？我知道我的代码有问题，我只是还不习惯使用Grid来解决问题。谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）