如何阻止Chrome自动填充修改React+MaterialUI表单输入框背景色

解决方案 #

这个问题的根源是Chrome自动填充会自动给输入框加上-webkit-autofill私有伪类，并注入高优先级的默认黄色背景、文字颜色样式，覆盖了你原本的Material UI样式。以下方案可以在完全保留自动填充功能的前提下修正样式：

方案1：针对单个TextField组件调整

直接在组件的sx属性中添加伪类覆盖规则：

import TextField from '@mui/material/TextField';

<TextField
  label="用户名"
  name="username"
  type="text"
  sx={{
    'input:-webkit-autofill': {
      // 用内阴影覆盖Chrome默认黄色背景，颜色值和你的输入框背景保持一致即可
      WebkitBoxShadow: '0 0 0 100px #ffffff inset',
      // 文字颜色和正常输入状态保持一致
      WebkitTextFillColor: '#1a1a1a',
      // 可选：避免切换焦点时背景闪黄
      transition: 'background-color 5000s ease-in-out 0s',
    },
  }}
/>

方案2：全局覆盖所有Material UI输入框样式

如果你需要全站所有输入框都适配，直接自定义MUI主题即可：

import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const customTheme = createTheme({
  components: {
    MuiInputBase: {
      styleOverrides: {
        input: {
          '&:-webkit-autofill': {
            WebkitBoxShadow: '0 0 0 100px #ffffff inset',
            WebkitTextFillColor: '#1a1a1a',
            transition: 'background-color 5000s ease-in-out 0s',
          },
          // 可选：适配自动填充时的悬浮、聚焦状态
          '&:-webkit-autofill:hover': {
            WebkitBoxShadow: '0 0 0 100px #f5f5f5 inset',
          },
          '&:-webkit-autofill:focus': {
            WebkitBoxShadow: '0 0 0 100px #ffffff inset',
          },
        },
      },
    },
  },
});

// 根组件包裹ThemeProvider
export default function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <CssBaseline />
      {/* 你的业务代码 */}
    </ThemeProvider>
  );
}

以上方案在Chrome、Edge等webkit内核浏览器下均生效，不会对自动填充功能产生任何影响。

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