React + Material UI 自动填充数据导致TextField样式损坏问题求助

问题原因 #

• 你给TextField组件硬编码了focused属性，强制固定输入框为聚焦状态，干扰了Material UI内部对输入框状态（是否有值、是否聚焦、是否自动填充）的判断，导致自动填充后label无法正确上浮、样式错位。
• 你同时硬编码了error属性为永久true，输入框会一直保持错误状态样式，不符合正常交互逻辑。
• 浏览器默认会给自动填充的输入框添加专属样式（如Chrome的黄色背景、字体样式），覆盖了Material UI的默认输入框样式。

解决方案 #

步骤1：移除硬编码的状态属性 #

删除两个TextField上的focused固定属性，如果需要页面加载后默认聚焦邮箱输入框，替换为原生的autoFocus属性即可。
同时将error属性绑定到实际的校验状态，不要永久设为true，示例如下：

// 先新增校验状态
const [emailError, setEmailError] = useState(false);

// TextField中绑定动态校验状态
error={emailError}

步骤2：覆盖浏览器自动填充默认样式 #

给TextField添加sx属性，覆盖浏览器自动填充的默认样式，避免和MUI样式冲突：

sx={{
  // 匹配webkit内核浏览器的自动填充样式
  "& input:-webkit-autofill": {
    // 替换为你的输入框背景色，覆盖默认黄色背景
    WebkitBoxShadow: "0 0 0 100px #ffffff inset",
    // 替换为你的输入框文字颜色
    WebkitTextFillColor: "#212121",
    // 延长背景色过渡时间，避免切换时闪屏
    transition: "background-color 5000s ease-in-out 0s"
  },
  // 适配火狐浏览器自动填充
  "& input:-moz-autofill": {
    boxShadow: "0 0 0 100px #ffffff inset",
    color: "#212121"
  }
}}

步骤3：完整修改后的TextField示例 #

<TextField
  required
  // 绑定实际校验状态，不要写死error
  error={emailError}
  id="outlined-error-helper-text"
  label="Email Address"
  fullWidth
  color="error"
  // 用autoFocus代替硬写的focused
  autoFocus
  style={{marginBottom:"10px"}}
  onChange={handleInputChange}
  value={userFormData.email}
  name="email"
  // 新增自动填充样式覆盖
  sx={{
    "& input:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 100px #ffffff inset",
      WebkitTextFillColor: "#212121",
      transition: "background-color 5000s ease-in-out 0s"
    },
    "& input:-moz-autofill": {
      boxShadow: "0 0 0 100px #ffffff inset",
      color: "#212121"
    }
  }}
/>

密码输入框也做同样的修改即可解决自动填充后的样式损坏问题。

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