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

Question

我在React JS Project中使用Grid Component时遇到了一些问题，我将首先编写一些代码并在使用图像实现之后进行解释：

假设这是呈现的代码：

 <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>

以下是它的外观（我的红色格子和黑色的大格子）：

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

我知道我的正确元素有一个问题很简单，因为我制作了CSS，但我现在不知道如何控制网格属性，因为我希望xs在某个位置从6变为12。

怎么办？如果不可能，有更好的解决方案吗？

任何帮助将非常感激。

Answer 1

取决于你希望它从6到12的大小，但它就像把正确的道具值放在：

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

请务必阅读完整的用例：https://material-ui.com/layout/grid/