如何移除Material UI中TextField组件的默认填充值？

DevOps 小满

2026-10-1

Material UI TextField 移除浏览器默认填充内容方案

你遇到的自动填充现象是浏览器的默认表单填表逻辑导致，可通过以下方式解决：

方法1：添加autoComplete属性（最简单）

直接给TextField组件添加autoComplete属性覆盖浏览器默认行为：

普通场景设置为off即可生效
针对强制触发密码/邮箱填充的浏览器，可设置为无语义的自定义值比如new-password屏蔽自动匹配逻辑

修改后代码示例：

<TextField
  label="Email"
  variant="outlined"
  type="email"
  required
  autoComplete="off"
/>

<TextField
  label="Password"
  variant="outlined"
  type="password"
  required
  autoComplete="new-password"
/>

如果是整表单一键填充的场景，也可以在外层的`<form>`标签上统一添加`autoComplete="off"`属性。

方法2：使用受控组件模式（兼容性最好）

如果属性配置不生效，可以将TextField改为受控组件，通过React状态强制控制输入框的值，初始值设为空字符串即可完全屏蔽默认填充内容：

import { useState } from 'react'
import TextField from '@mui/material/TextField'

export default function MyForm() {
  // 初始化表单状态，默认值为空字符串
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  })

  const handleChange = (e) => {
    const { name, value } = e.target
    setFormData(prev => ({ ...prev, [name]: value }))
  }

  return (
    <form autoComplete="off">
      <TextField
        label="Email"
        variant="outlined"
        type="email"
        required
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <TextField
        label="Password"
        variant="outlined"
        type="password"
        required
        name="password"
        value={formData.password}
        onChange={handleChange}
        autoComplete="new-password"
      />
    </form>
  )
}