reactjs - React js material ui textfield helper 文本位置

Question

我正在处理我的 React js 项目，我正在使用 Material 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

Text Field limitations in the Material UI documentation 中提到了这一点.

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

之前:

<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"
/>