Material-UI 网格内绝对定位

Question

我想将 material-ui 图标与文本对齐，以便图标的最低绘制点正好从基线开始。 我们使用 Material-UI 网格布局。

问题是：如果我允许图标与“基线”对齐，它就太高了。 如果我做alignSelf: 'center' ，它太低了。 在这一点上，我可以通过某种方式将图标绝对定位以匹配文本基线，但我不知道 flexbox 是否可行。

  <Grid container justify="space-between" xs={6}>
    <Grid item>
      <Button variant="outlined">Cancel</Button>
    </Grid>
    <Grid item>
      <Grid container alignItems="baseline">
        <Grid item>
          <Grid container alignItems="baseline">
            <Grid item style={{ alignSelf: "center" }}>
              <Done />
            </Grid>
            <Grid item>
              <Typography>Done!</Typography>
            </Grid>
          </Grid>
        </Grid>
        <Grid item>
          <Button variant="outlined">Submit</Button>
        </Grid>
      </Grid>
    </Grid>
  </Grid>
</div>

如您所见，图标呈现在基线下方，而文本正确对齐：

Answer 1

您可以添加自定义relative定位来手动调整复选标记的 position，如下所示：

   <Done style={{ position: "relative", top: "-1px"}} />

您可以更改top属性，直到选中标记对齐。 如果您删除alignSelf属性，您可能需要使用top: "5px"代替。