如何禁用Material UI TextField邮政编码字段的浏览器自动填充

使用最新版本Material UI开发用户联系信息表单，表单包含邮政编码输入字段。需求是字段值为空时不触发浏览器自动填充，但实际该字段始终会被浏览器中保存的邮箱地址自动填充。
已尝试的无效方案：

• autoComplete="off"
• autocomplete="off"
• autoComplete="nope"

当前编写的TextField组件代码如下：

<Textfield
    name="zipCode"
    id="zipCode"
    label="Zipcode *"
    autoComplete='nope'
    value={addressDetails.zipCode || ""}
    onChange={updateAddressDetails}
    error={displayError(validationErrors?.zipCode)}
    helperText={validationErrors?.zipCode}
    fullWidth
/>

表单异常效果参考：

目前autoComplete='nope'配置对城市等其他字段可正常生效，唯独zipCode邮政编码字段无效。

浏览器对地址类输入项的自动填充识别有内置规则，不会完全遵循自定义的autoComplete无效值，当字段name/id和标准自动填充字段名（比如zipCode）完全匹配时，会被强制关联已保存的账号/地址填充数据，可按以下方式修复：

1. 优先使用标准语义化的autoComplete值：不要传nope这类自定义值，替换为autoComplete="postal-code"，明确告知浏览器该字段为邮政编码输入项，避免浏览器错误匹配邮箱类填充数据。
2. 如果需要彻底禁用该字段自动填充，做两处修改：
   • 将字段的name、id属性从zipCode改为非标准匹配的自定义名称，比如userPostalCode
   • 将autoComplete属性值改为new-password，这是目前Chrome、Edge、Firefox等主流浏览器识别度最高的强制禁用自动填充标识，兼容性远好于off/nope
     修改后参考代码：

   <Textfield
       name="userPostalCode"
       id="userPostalCode"
       label="Zipcode *"
       autoComplete="new-password"
       value={addressDetails.zipCode || ""}
       onChange={updateAddressDetails}
       error={displayError(validationErrors?.zipCode)}
       helperText={validationErrors?.zipCode}
       fullWidth
   />
   

3. 若上述方案仍不生效，可在表单顶部添加一个设置为display: none的隐藏input，给该input配置name="email" autoComplete="email"，将浏览器的邮箱自动填充行为引导到这个不可见的输入项上，不会影响真实业务字段的输入。

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