MUI TextField选择自动填充选项时背景变白问题求助

浏览器自动填充输入框时，会给元素加上:-webkit-autofill伪类，其默认样式会覆盖MUI Filled TextField的背景色，导致手动输入和自动填充时背景不一致。以下是几种可行的解决办法：

1. 针对单个TextField覆盖样式 #

直接在TextField的sx属性中添加伪类样式，确保自动填充时的背景和正常状态匹配：

<TextField
  onChange={(e) => {
    handleSetUserData(e);
  }}
  sx={{
    marginTop: "10px",
    '& input:-webkit-autofill': {
      // 用inset阴影覆盖浏览器默认背景，颜色替换为你的正常背景色
      boxShadow: '0 0 0 100px #f5f5f5 inset',
      // 确保文字颜色不受影响
      WebkitTextFillColor: '#000',
      // 若阴影方式不生效，可直接设置背景色
      backgroundColor: '#f5f5f5',
    },
    // 处理自动填充时聚焦的情况
    '& input:-webkit-autofill:focus': {
      boxShadow: '0 0 0 100px #f5f5f5 inset',
      backgroundColor: '#f5f5f5',
    }
  }}
  fullWidth
  required
  variant="filled"
  label="Username"
  name="userName"
  inputProps={{ maxLength: 12 }}
/>

2. 全局统一处理（多TextField场景） #

如果多个TextField都存在这个问题，可通过GlobalStyles组件全局覆盖样式，避免重复代码：

import { GlobalStyles } from '@mui/material';

// 在你的根组件或FormControl父组件中添加
<GlobalStyles styles={{
  'input:-webkit-autofill, input:-webkit-autofill:focus': {
    boxShadow: '0 0 0 100px #f5f5f5 inset',
    WebkitTextFillColor: '#000',
    backgroundColor: '#f5f5f5',
  }
}} />

3. 禁用浏览器自动填充（业务允许时） #

若不需要浏览器自动填充功能，可在inputProps中设置autoComplete属性：

<TextField
  // 其他属性保持不变
  inputProps={{ 
    maxLength: 12,
    autoComplete: "off"
  }}
/>

注：部分浏览器可能忽略autoComplete="off"，此时可尝试autoComplete="new-password"（对用户名输入框也适用）。

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