使用网格材质UI时的响应设计问题？

Question

我在React JS Project中使用网格组件时遇到了一些问题，我将从编写一些代码开始，并在我想使用图像实现以下内容后进行解释：

让我们说这是渲染的代码：

 <div style="margin:100px 20%; width:80%" >
     <Grid container>
         <Grid item xs={6}>
             <MyElement 
               contentLeft="Something displayed in the left"
               contentRight="Something displayed in the right"
             >
         </Grid>
         <Grid item xs={6}>
            <MyElement 
               contentLeft="Something displayed in the left"
               contentRight="Something displayed in the right"
            >
         </Grid>
     </Grid>
 </div>

这就是它的外观（红色的我的网格和黑色的大div）：

当我调整窗口大小并将其缩小时，它的外观如下：

我知道适当的Element中存在一个问题，这很容易，因为我制作了CSS，但是现在我不知道如何控制Grids属性，因为我希望xs在特定位置从6变为12。

如何这样做？如果不可能，是否有更好的解决方案？

任何帮助将不胜感激。

Answer 1

取决于您希望它从6变为12的大小，但这就像将正确的prop值放入其中一样简单：

<Grid item xs={12} sm={6}>

请确保在此处阅读完整的用例：https://material-ui.com/layout/grid/