Question

我正在尝试使用材料-ui，我正在制作响应式地址组件。我需要稍微调整填充和边距以使所有内容正确对齐，我想知道我是否做错了什么。以下是我的观点：

红色箭头指向州/邮政和城市之间的额外填充。这只发生在较小的尺寸（sm，xs）。

这是修复的样子。我已经包含了内联样式，以显示需要调整以纠正填充。

    <Grid container>
      <Grid item xs={12} md={6}>
          <Typography type="title">Address</Typography>
          <TextField label="Street" fullWidth />
          <TextField label="Street 2" fullWidth />

        <Grid container style={{ marginTop: 0}}>
          <Grid item xs={12} md={6} style={{ paddingTop: 0, paddingBottom: 0 }}>
            <TextField label="City" fullWidth />
          </Grid>
          <Grid item xs={12} sm={6} md style={{ paddingTop: 0, paddingBottom: 0 }}>
            <TextField label="State" fullWidth />
          </Grid>
          <Grid item xs={12} sm={6} md style={{paddingTop: 0}}>
            <TextField label="Zip" fullWidth/>
          </Grid>
        </Grid>
      </Grid>

      <Grid item xs={12} md={6}>
        <Typography type="title">Point of contact</Typography>
        <TextField label="Name" fullWidth />
        <TextField label="Phone number" fullWidth />
        <TextField label="Special instrucitons" fullWidth multiline />
      </Grid>
    </Grid>

也许我在滥用网格组件？我不确定。

这是一个codesandbox示例：

https://codesandbox.io/s/wnqqyljxw7

（如果删除内联样式并调整页面大小，则可以在此示例中看到添加到状态/ zip的额外空间。

Answer 1

我发现您的JSX有一些小问题。如果要在中小型屏幕上显示2列，则将外部容器设置为“行”方向（<网格容器方向= {'行'}>）。如果要堆叠，请将外部容器的direction属性的值设置为“ column”。

将标签和文本字段嵌套在组件中，以便一致地计算它们的高度/宽度，从而可预测地彼此堆叠。您也可以添加alignItems或证明属性，但是这些是可选的。您已将所有内容左对齐，因此我建议将“ flex-start”作为justify和alignItems的起始值。

还要与屏幕大小的断点保持一致。有些项目在xs和md处都有断点，但是其余的项目在xs和sm处都有断点，而md的值未指定。也许这是MUI允许的语法，尽管我从未见过。我总是为断点添加显式值。如果您希望中小型屏幕的列占据父容器宽度的50％，则只需为sm指定一个值。您可以为大屏幕指定其他值，可能为25-33％（lg = {3}或lg = {4}）。

并查看一下MUI的文档：https://material-ui.com/components/grid/

尝试一下：

<Grid container direction={'row'}>
 <Grid item xs={12} sm={6}>
  <Typography type="title">Address</Typography>
  <TextField label="Street" fullWidth />
  <TextField label="Street 2" fullWidth />

  <Grid container direction={'row'} alignItems={'stretch'}>
   <Grid item xs={12} sm={6}>
    <TextField label="City" fullWidth />
   </Grid>
   <Grid item xs={12} sm={6}>
    <TextField label="State" fullWidth />
   </Grid>
   <Grid item xs={12} sm={6}>
    <TextField label="Zip" fullWidth/>
   </Grid>
   <Grid item xs={12} sm={6}>
    Placeholder
   </Grid>
  </Grid>
 </Grid>

 <Grid item xs={12} sm={6}>
  <Typography type="title">Point of contact</Typography>
  <TextField label="Name" fullWidth />
  <TextField label="Phone number" fullWidth />
  <TextField label="Special instrucitons" fullWidth multiline />
 </Grid>
</Grid>

网格容器的间距问题 - ＆gt; item - ＆gt;容器 - ＆gt;项目

1 个答案: