Material UI 5.15.2中OutlinedInput与InputLabel参数配置异常求助

问题核心在于你硬绑定了shrink和notched属性到topLabel，覆盖了MUI默认的状态联动逻辑，导致text类型输入框无法根据聚焦/输入状态自动切换Label位置。以下是修正后的实现：

修正后的组件代码 #

import { useState } from 'react';
import { FormControl, InputLabel, OutlinedInput } from '@mui/material';

export const TextFieldInput = ({ label, name, type = "text", topLabel = false, value }) => {
  const [isFocused, setIsFocused] = useState(false);
  
  // 动态计算Label收缩状态
  const shouldShrink = topLabel || !!value || isFocused;

  return (
    <FormControl fullWidth>
      <InputLabel shrink={shouldShrink}>
        {label}
      </InputLabel>
      <OutlinedInput 
        label={label}
        name={name}
        notched={shouldShrink}
        type={type}
        value={value}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
    </FormControl>
  )
}

逻辑说明 #

1. 聚焦状态跟踪：新增isFocused状态，通过onFocus/onBlur事件更新，用于判断输入框是否处于交互状态。
2. 动态收缩判断：
   • 当topLabel=true（date类型）：shouldShrink固定为true，Label始终显示在输入框顶部。
   • 当topLabel=false（text类型）：shouldShrink根据「输入框有值」或「处于聚焦状态」自动切换，实现默认作为占位符、交互后移至顶部的效果。
3. 边框缺口联动：notched属性与shouldShrink保持一致，确保输入框边框缺口与Label位置匹配，符合MUI的视觉规范。

调用代码无需修改，即可实现预期效果：

• surname（text类型）：默认Label作为占位符，输入内容或点击聚焦后移至顶部。
• dob（date类型）：Label始终固定在输入框顶部，不会作为占位符。

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