Material UI <TextField/> 不垂直对齐它的标签答案

【问题标题】：Material UI <TextField/> not Vertical Align with it's LabelMaterial UI <TextField/> 不垂直对齐它的标签
【发布时间】：2020-11-09 13:39:41
【问题描述】：

我想垂直对齐 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>

这里的样子

谁能给我一个解决方案？

【问题讨论】：

如果您可以移除标签道具，它将使这两个更加相互对齐。如果您仍想保留标签，则需要直接使用 CSS

标签： reactjs grid material-ui textfield typography

【解决方案1】：

你可以使用alignItems="center"

【讨论】：

【解决方案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

【讨论】：