React+Material UI项目TextField自动补全背景色异常求助

这个问题是浏览器对自动填充表单字段的默认样式导致的，需要通过自定义CSS伪类样式来覆盖浏览器的默认设置。你可以修改TextField的sx属性，添加针对-webkit-autofill伪类的样式规则：

<TextField
  type={props.type ? props.type : 'text'}
  sx={{
    color: '#fff',
    // 覆盖浏览器自动填充的背景色
    '&:-webkit-autofill': {
      backgroundColor: '#你的背景色', // 替换成你页面实际使用的背景色
      boxShadow: '0 0 0 100px #你的背景色 inset', // 确保背景色完全覆盖输入框区域
      caretColor: '#fff', // 保持光标为白色
      color: '#fff' // 保持文字为白色
    }
  }}
  value={props.value}
  onChange={(e) => props.changeEvent(e.target.value)}
  label={<Typography variant="body2" sx={{ color: '#fff' }}>{props.placeholder}</Typography>}
  borderColor="white"
  fullWidth
/>

关键说明： #

• 部分浏览器中直接设置backgroundColor可能不生效，因此使用boxShadow的技巧，通过内部阴影完全覆盖输入框的背景区域，确保自定义背景色生效。
• 同时指定color和caretColor，保证自动填充时的文字、光标颜色和手动输入时一致。

如果上述方法仍不生效，可以尝试添加过渡属性强制浏览器延迟默认背景色的应用：

'&:-webkit-autofill': {
  backgroundColor: '#你的背景色',
  boxShadow: '0 0 0 100px #你的背景色 inset',
  caretColor: '#fff',
  color: '#fff',
  transition: 'background-color 5000s ease-in-out 0s'
}

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