React js材质ui文本字段帮助器文本位置

Question

我正在开发我的 React js 项目，我正在使用材质 UI 库来编辑表行，问题是我无法将文本字段与其他字段对齐，当辅助文本出现时，文本字段会向上移动？如有任何帮助，我将不胜感激

      <TableRow className={classes.root} >
        </TableCell>

          {edit ?    <TableCell align="justify"><TextField tfield
          value={state.Name}
          name={row.Name}
          id="Name"
          onChange={e => handle_change(e, row.Name)}
         error={Boolean(HelperText["Name"] != "") ? true : false}

          helperText={HelperText["Name"]}
       
        /></TableCell>  :  <TableCell align="left">{row.Name}</TableCell>
}
          {edit ?    <TableCell align="justify"><TextField
          value={state.address}
          name={row.address}
          id="address"
          error={Boolean(HelperText["address"] != "") ? true : false}
          helperText={HelperText["address"]}

          onChange={e => handle_change(e, row.address)}
    
        /></TableCell>  :  <TableCell align="left">{row.address}</TableCell>

}
{edit ?    <TableCell align="justify"><TextField
          value={state.commune}
          id="commune"
          name={row.commune}
          onChange={e => handle_change(e, row.commune)}
           error={Boolean(HelperText["commune"] != "") ? true : false}
          helperText={HelperText["commune"]}
       
        /></TableCell>  :  <TableCell align="left">{row.commune}</TableCell>
}
{edit ?    <TableCell align="justify">   <Select style={{ marginBottom : "10px", minWidth: 120,}}
            value={Wilaya}
          onChange={handleChangeWilaya}
          id="wilaya"
                                                     InputProps={{
        
          name={row.wilaya}
          displayEmpty
          // className={classes.selectEmpty}
          inputProps={{ 'aria-label': 'Without label' }}
          >
              {wilaya.map((item,index)=>{
                  return  <MenuItem value={item.nom.toString()} >{item.nom.toString()}</MenuItem>
              })}

          </Select></TableCell>  :  <TableCell align="left">{row.wilaya}</TableCell>
}
      </TableRow>

Answer 1

Material UI 文档中的文本字段限制中提到了这一点。

他们提出的解决方法是向所有应对齐的文本字段添加一个空的辅助文本。这会将文本字段移动到同一位置，无论它们是否具有可见的帮助文本。

前：

<TextField
  helperText="Please enter your name"
  id="demo-helper-text-misaligned"
  label="Name"
/>
<TextField id="demo-helper-text-misaligned-no-helper" label="Name" />

后：

<TextField
  helperText="Please enter your name"
  id="demo-helper-text-aligned"
  label="Name"
/>
<TextField
  helperText=" "
  id="demo-helper-text-aligned-no-helper"
  label="Name"
/>