MaterialUI网格direction=row不工作

Question

我正在尝试创建一个按特定顺序对齐的按钮网格，但我在同一行上创建两个按钮时遇到了困难：

期望值：

​

​

相反，屏幕截图( row2 )(红色的两列)是按列方向显示的(第二列在第一列下面，屏幕截图：http://prntscr.com/x4amxf)，而不是像我预期的那样按行方向显示。

这是我的网格：

<Grid container direction="column"> // this is another container that wraps everything, not in the picture above
  <Grid item container direction="row"></Grid> // another row of stuff, not related, works just fine

  // picture represents this grid
  <Grid item container direction="row" spacing={1}>
    <Grid align="center" direction="row" justify="center" item container xs={1}>
      <Grid item container direction="column">
        <Grid item></Grid>
        <Grid item></Grid>
      </Grid>
      <Grid item container direction="column">
        <Grid item></Grid>
        <Grid item></Grid>
      </Grid>
    </Grid>
  </Grid> 
</Grid>

我试着将xs增加到2，看看是否有尺寸问题，但它只是拉长了项目。

和实际代码(但上面的结构表示相同)：

<Grid container direction="column">
  <Grid item container>
  </Grid>
  <Grid item container direction="row" spacing={1}>
    <Grid item>
      <AddPrice open={open} handleClosePopup={handleClose} item={item} />

      <IconButton variant="contained" onClick={handleClose}>
        <AddCircleOutlineIcon color="primary" style={{ fontSize: 40, marginRight: 5 }} />
        <Typography>Цена</Typography>
      </IconButton>
    </Grid>
    {item.prices.map(({ price, quantity }) => (
      <React.Fragment key={`itemPrice1${price}`}>
        <Grid align="center" direction="row" justify="center" item container xs={1}>
          <Grid item container direction="column">
            <Grid item>
              <Button>
                <Grid item direction="column" container>
                  <Grid item>
                    <Typography variant="button">{price} лв.</Typography>
                  </Grid>
                  <Grid item>
                    <Typography variant="button">
                      {quantity.available} {item.quantity.type}.
                    </Typography>
                  </Grid>
                </Grid>
              </Button>
            </Grid>
          </Grid>
          {editing && (
            <Grid item container direction="column">
              <Grid item>
                <IconButton style={{ border: "1px solid #f44336" }} variant="contained" color="secondary">
                  <DeleteForever color="secondary" style={{ fontSize: 30 }} />
                </IconButton>
              </Grid>
              <Grid item>
                <IconButton style={{ border: "1px solid #3f51b5" }}>
                  <EditIcon color="primary" style={{ fontSize: 30 }} />
                </IconButton>
              </Grid>
            </Grid>
          )}
        </Grid>
      </React.Fragment>
    ))}
  </Grid>
  <Grid item container></Grid>
</Grid>

基本上，编辑按钮应该出现在价格按钮的右边。

沙盒：https://codesandbox.io/s/material-demo-forked-6v50s?file=/demo.js

Answer 1

如果我没理解错的话，你必须像这样重构你的布局：

    <Grid container direction="column">
      <Grid item container direciton="row">
        Row1
      </Grid>
      <Grid align="center" direction="row" container>
        <Grid item xs={2} style={{ border: "1px solid black" }}>
          <Grid item>BR</Grid>
          <Grid item>TXT</Grid>
        </Grid>
        <Grid item xs={2} style={{ border: "1px solid black" }}>
          <Grid item>EDIT</Grid>
          <Grid item>DELETE</Grid>
        </Grid>
      </Grid>
    </Grid>

请查看the example