MUI：TextField实现的Select组件Helper Text显示位置异常

你遇到的情况是：使用带select属性的TextField组件时，设置的helperText会显示在输入框下方，而非输入框内部。若要让提示文本出现在输入框内部，需要用placeholder属性替代helperText——MUI中helperText的设计定位就是输入框下方的辅助说明，而输入框内部的占位提示由placeholder负责。

修改后的代码示例：

<Grid container spacing={2}>
  <Grid item xs={space} key={1}>
    <TextField
      value=""
      onChange={(e) => {}}
      select
      label="Status"
      fullWidth
      placeholder="123"
    />
  </Grid>
</Grid>

如果需要同时保留输入框内部的占位提示和下方的辅助说明文本，可以同时配置两个属性：

<Grid container spacing={2}>
  <Grid item xs={space} key={1}>
    <TextField
      value=""
      onChange={(e) => {}}
      select
      label="Status"
      fullWidth
      placeholder="请选择状态"
      helperText="这是下方的辅助说明内容"
    />
  </Grid>
</Grid>

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