材质UI <TextField />与其标签不垂直对齐

Question

我想垂直对齐Material UI的Typography和TextField。 这是我的代码

<Grid container>
    <Grid item xs={12} sm={3}>
        <Typography>1.1 Company Name</Typography>
    </Grid>
    <Grid item xs={12} sm={9}>
        <TextField id="standard-basic" label="Standard"/>
    </Grid>
</Grid>

这里看起来

有人可以给我解决方案吗？

Answer 1

您可以使用alignItems="center"

Answer 2

在这种情况下，您可以将 align-items: flex-end;应用于容器。

.MuiGrid-container {
  align-items: flex-end;
}

还可以更改模板：-

<Grid container>
      <Grid item xs={12} sm={4}>
        <Typography>1.1 Company Name</Typography>
      </Grid>
      <Grid item xs={12} sm={8}>
        <TextField id="standard-basic" label="Standard" />
      </Grid>
    </Grid>

工作代码-https://codesandbox.io/s/funny-vaughan-kktty?file=/src/styles.css