如何在Material UI v5中防止InputAdornment导致TextField宽度收缩？

• 修正InputAdornment的position属性：你当前给endAdornment配置的是position="start"，这会导致布局计算错误，应该改成position="end"，与endAdornment的位置匹配：

<TextField
  label="Username"
  {...formik.getFieldProps("username")}
  InputProps={{
    endAdornment: (
      <InputAdornment position="end">
        <Tooltip title="demo">
          <ErrorIcon sx={{ color: "orange" }} />
        </Tooltip>
      </InputAdornment>
    ),
  }}
/>

• 给TextField设置固定宽度或占满容器：

  • 使用fullWidth属性让组件占满父容器：

  <TextField
    label="Username"
    fullWidth
    {...formik.getFieldProps("username")}
    InputProps={{
      endAdornment: (
        <InputAdornment position="end">
          <Tooltip title="demo">
            <ErrorIcon sx={{ color: "orange" }} />
          </Tooltip>
        </InputAdornment>
      ),
    }}
  />
  

  • 自定义固定宽度：

  <TextField
    label="Username"
    sx={{ width: 300 }}
    {...formik.getFieldProps("username")}
    InputProps={{
      endAdornment: (
        <InputAdornment position="end">
          <Tooltip title="demo">
            <ErrorIcon sx={{ color: "orange" }} />
          </Tooltip>
        </InputAdornment>
      ),
    }}
  />
  

• 调整Input内部布局样式：如果以上方法无效，给Input组件添加宽度样式确保布局正确：

<TextField
  label="Username"
  {...formik.getFieldProps("username")}
  InputProps={{
    sx: { width: "100%" },
    endAdornment: (
      <InputAdornment position="end">
        <Tooltip title="demo">
          <ErrorIcon sx={{ color: "orange" }} />
        </Tooltip>
      </InputAdornment>
    ),
  }}
/>

内容的提问来源于stack exchange，提问作者utg.tdawg