React项目中MUI TextField在Safari浏览器出现异常图标求助

这是Safari浏览器自带的密码自动填充/表单建议图标，是Safari默认提供的表单填充快捷功能，其他浏览器无此默认样式，所以显示效果和你预期不一致。

解决方法 #

• 通过CSS隐藏图标
  可以针对单个TextField或全局输入框添加样式，隐藏该图标：

/* 单个TextField的样式 */
.safari-input::-webkit-contacts-auto-fill-button,
.safari-input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

使用时给TextField指定className="safari-input"即可。如果要全局生效，把选择器改成input即可。

• 禁用自动填充功能
  给MUI TextField设置autoComplete属性，阻止Safari触发填充建议：

<TextField
  label="你的输入框标签"
  autoComplete="off"
  // 若为密码输入框，推荐用autoComplete="new-password"
/>

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