Material UI中TextField与标签、Typography垂直对齐问题求助

嘿，我来帮你搞定这两个Material UI的垂直对齐问题，咱们直接上解决方案：

1. 让Typography和TextField垂直居中对齐 #

问题出在最外层的Grid容器默认没有设置垂直对齐规则，咱们给它加上alignItems="center"属性，这样两个Grid子项里的内容就会沿着垂直方向居中对齐了：

<Grid container alignItems="center">
  <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>

2. 修复TextField自身标签与输入框的垂直对齐 #

你用的standard变体，它的标签默认是浮动在输入框上方的，要是觉得这个对齐效果不符合预期，有两个办法：

办法一：微调standard变体的样式

通过InputLabelProps和InputProps来调整标签和输入框的垂直位置，让它们对齐更协调：

<TextField
  id="standard-basic"
  label="Standard"
  InputLabelProps={{
    style: {
      verticalAlign: 'middle',
      paddingTop: '2px' // 可以根据你的视觉需求微调这个值
    }
  }}
  InputProps={{
    style: {
      verticalAlign: 'middle'
    }
  }}
/>

办法二：改用outlined/filled变体

这两个变体的标签对齐逻辑更直观，默认就能让标签和输入框的垂直位置看起来更舒服，代码也更简洁：

<TextField
  id="outlined-basic"
  label="Outlined"
  variant="outlined"
/>

这样调整之后，两个对齐问题应该都能解决啦～

内容的提问来源于stack exchange，提问作者shayanmalinda