MUI TextField添加InputProps图标后占位符转值动画消失问题排查

问题根源 #

核心原因是自定义InputProps时覆盖了MUI内部触发标签浮动动画的关键属性。MUI的TextField标签浮动动画（占位符转标签上浮）依赖输入框组件内部的classes样式类和状态关联，当你直接通过...inputProps展开覆盖params.InputProps时，会冲掉MUI原生生成的classes等核心配置——这些类负责控制标签在输入有值、聚焦时的样式变化，一旦丢失，动画自然无法触发。

如果使用outlined变体，标签浮动还依赖NotchedOutline组件的状态变化，自定义InputProps若干扰了这个组件的类名传递，也会导致边框缺口和标签动画同步失效。

修复方案 #

要保留动画，需确保扩展InputProps时完整保留MUI原生配置，仅追加自定义图标装饰器或其他属性，以下是两种可行修改方式：

方式1：单独合并图标装饰器 #

如果inputProps仅包含startAdornment/endAdornment（用于插入图标），可单独提取这些属性合并，避免覆盖原生配置：

<TextField
  {...params}
  error={touched && invalid}
  helperText={touched && error}
  label={label}
  margin={margin}
  InputProps={{
    ...params.InputProps, // 保留MUI原生InputProps配置
    // 仅追加图标装饰器
    startAdornment: inputProps?.startAdornment,
    endAdornment: inputProps?.endAdornment,
    readOnly: isReadOnlyTextField,
  }}
  placeholder={isShowPlaceholder ? placeholder : ''}
  variant={isOutlined ? 'outlined' : 'standard'}
  InputLabelProps={InputLabelProps}
  className={className}
/>

方式2：完整合并属性并保留原生classes #

如果inputProps包含其他自定义属性，需优先保留原生classes，再覆盖其他属性：

<TextField
  {...params}
  error={touched && invalid}
  helperText={touched && error}
  label={label}
  margin={margin}
  InputProps={{
    ...params.InputProps,
    // 先保留原生classes，再合并自定义classes
    classes: {
      ...params.InputProps?.classes,
      ...inputProps?.classes,
    },
    ...inputProps, // 合并其他自定义属性
    readOnly: isReadOnlyTextField, // 覆盖readOnly状态（如果需要）
  }}
  placeholder={isShowPlaceholder ? placeholder : ''}
  variant={isOutlined ? 'outlined' : 'standard'}
  InputLabelProps={InputLabelProps}
  className={className}
/>

关键注意事项 #

• 不要直接用...inputProps覆盖params.InputProps，原生params.InputProps里的classes是动画核心依赖，必须保留。
• 对于outlined变体，确保NotchedOutline的类名未被自定义配置覆盖，否则标签浮动时的边框缺口动画也会失效。
• 使用InputAdornment添加图标时，务必设置正确的position属性（start/end），避免干扰输入框内部布局逻辑。

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