我碰到过不少人遇到Edge里autocomplete="off"反触发自动填充的情况，这浏览器的逻辑确实有点坑。给你几个不用关浏览器设置就能解决的方法，亲测有效：

1. 改用更精准的autocomplete属性值 #

Edge对off的处理比较特殊，反而会触发它的“补全逻辑”，试试用这些更具体的值：

• 对于不需要自动填充的字段，优先用autocomplete="new-password"——这个原本是为密码字段设计的，但普通文本框也能生效，Edge会识别为不需要保存/填充的内容。
• 如果是特定类型字段，比如不想让用户名被填充，也可以用autocomplete="username"配合其他设置，但new-password的兼容性和禁用效果更稳定。

在MUI TextField里的用法：

<TextField
  label="自定义输入框"
  variant="outlined"
  autocomplete="new-password"
/>

2. 结合MUI的InputProps做临时只读处理 #

有时候单纯设置autocomplete不够，可以给输入框加临时的readOnly属性，配合焦点事件动态取消只读——浏览器不会给只读字段填充内容，用户点击输入框时再恢复可编辑，完全不影响体验：

<TextField
  label="自定义输入框"
  variant="outlined"
  autocomplete="off"
  InputProps={{
    readOnly: true,
    onFocus: (e) => {
      e.target.readOnly = false;
    },
  }}
/>

3. 用CSS覆盖input:-webkit-autofill样式（隐藏填充痕迹） #

如果上面的方法还是有填充提示，至少可以用CSS去掉自动填充后的黄色背景，让视觉上看起来没有被填充：

/* 针对MUI Outlined样式的输入框 */
.MuiOutlinedInput-input:-webkit-autofill,
.MuiOutlinedInput-input:-webkit-autofill:hover,
.MuiOutlinedInput-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

这段代码把自动填充的背景替换成白色，文字颜色保持默认，同时延长背景色过渡时间，让填充效果几乎不可察觉。

4. 额外小技巧：添加隐藏的“诱饵”输入框 #

还有个开发者常用的trick：在实际输入框前面加一个隐藏的、同类型的输入框，让浏览器优先填充这个诱饵，从而忽略真正的输入框：

{/* 隐藏的诱饵输入框 */}
<input
  type="text"
  autocomplete="username"
  style={{ display: 'none', position: 'absolute' }}
/>
{/* 真正需要使用的输入框 */}
<TextField
  label="用户名"
  variant="outlined"
  autocomplete="off"
/>

这个方法利用了浏览器优先填充第一个匹配类型字段的特性，布局上也不会影响页面展示。

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