如何在MUI的FormControl中为6个TextField设置共用的'Code Number'标签？

问题核心在于你给每个TextField单独设置了label属性，同时FormControl的InputLabel默认只会和第一个输入组件绑定，导致标签只显示在第一个输入框内。以下是修正方案：

修正步骤 #

• 移除每个TextField的label属性，避免和FormControl的共用标签冲突
• 给所有TextField添加inputProps={{ 'aria-labelledby': 'code-label' }}，让它们都关联到FormControl中的共用标签
• 用placeholder属性显示每个输入框的序号，提示用户对应输入位置

修正后的代码 #

const codeNumbers = ['code1', 'code2', 'code3', 'code4', 'code5', 'code6'];

<FormControl>
  <InputLabel id="code-label">Code Number</InputLabel>
  <Grid container spacing={2}>
    {codeNumbers.map((codeNumber) => (
      <Grid item xs={4} key={codeNumber}>
        <TextField
          id={codeNumber}
          name={codeNumber}
          placeholder={codeNumber.slice(-1)}
          inputProps={{ 'aria-labelledby': 'code-label' }}
        />
      </Grid>
    ))}
  </Grid>
  <FormHelperText>请输入6个以点分隔的数字</FormHelperText>
</FormControl>

补充说明 #

如果需要让标签在输入框获取焦点时浮动到上方的效果，还可以给FormControl添加variant="standard"或者variant="outlined"（需要配合TextField的variant保持一致），确保样式统一：

<FormControl variant="outlined">
  <InputLabel id="code-label">Code Number</InputLabel>
  <Grid container spacing={2}>
    {codeNumbers.map((codeNumber) => (
      <Grid item xs={4} key={codeNumber}>
        <TextField
          id={codeNumber}
          name={codeNumber}
          placeholder={codeNumber.slice(-1)}
          inputProps={{ 'aria-labelledby': 'code-label' }}
          variant="outlined"
        />
      </Grid>
    ))}
  </Grid>
  <FormHelperText>请输入6个以点分隔的数字</FormHelperText>
</FormControl>

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