如何使用网格材质ui？答案

【问题标题】：how to use grid material ui?如何使用网格材质ui？
【发布时间】：2021-09-06 18:59:07
【问题描述】：

我有一个组件，其网格如下所示： 组件区域：

<Grid container spacing={10} >
        <Grid item xs={4} ></Grid>
        <Grid item xs={4} ></Grid>
        <Grid item xs={4} ></Grid>
        <Grid item xs={4} ></Grid>
        <Grid item xs={4} ></Grid>
</Grid>

而我在另一个组件中使用了这个组件，它也有一系列的网格..组件地址：

  <Grid container  spacing={10}>
        <Grid item>
          <form >
            <Region></Region>
            <Grid container spacing={10}> 
            <Grid item xs={4} ></Grid>
            </Grid>
          <form >
        </Grid>
    </Grid>

我想要的是让这个网格成为其他网格的延续，但对我来说它转到下一行。我应该怎么做才能在以下组件区域中的地址组件内获取网格？

【问题讨论】：

标签： reactjs react-hooks material-ui grid

【解决方案1】：

您需要将所有网格项都放在同一个网格容器中。所以：

移除顶部的容器和项目，因为您只有一个项目而且没有任何意义。
从 Region 组件中移除容器并使用 Fragment
从地址中删除容器

地区：

<>
    <Grid item xs={4}>1</Grid>
    <Grid item xs={4}>2</Grid>
    <Grid item xs={4}>3</Grid>
    <Grid item xs={4}>4</Grid>
    <Grid item xs={4}>5</Grid>
</>

表格：

<form>
    <Grid container spacing={10}>
        <Region />
        
        <Grid item xs={4} >6</Grid>
    </Grid>
</form>

【讨论】：