自动完成禁用样式？（附图）答案

【问题标题】：Autocomplete disable styling? (Picture attached)自动完成禁用样式？（附图）
【发布时间】：2021-03-20 09:23:35
【问题描述】：

我正在使用material-ui + react。我正在构建一个简单的表单，一切正常，除了我有一个我不知道如何修复的小 UI。每当我使用浏览器自动完成时，输入字段都会保持突出显示。我一直在浏览 chrome 开发工具中的 CSS，但找不到设置它的内容。

这发生在所有文本字段中。当我从组件中删除自定义样式时仍然会发生。

很难用语言表达，所以这里有一些截图：

之前：

之后：

在我点击离开并选择其他内容后，它仍然突出显示。但是，如果我输入密码，则不会出现此突出显示。

组件：

const useStyles = makeStyles(theme => ({
    border: {
    '& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
      borderColor: theme.palette.secondary.main
    },
    width: '75%',
    alignSelf: 'center'
  },
})

const LoginForm = () => {
    const classes = useStyles();

    <TextField
          name='password'
          type='password'
          value={formik.values.password}
          className={classes.border}
          variant='outlined'
          label='Password'
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          error={formik.touched.password && Boolean(formik.errors.password)}
          helperText={formik.touched.password ? formik.errors.password : ''}
        />
}

【问题讨论】：

标签： html css reactjs material-ui

【解决方案1】：

将此添加到我的 theme.js 似乎可以解决我的问题：

const theme = {
    overrides: {
        MuiOutlinedInput: {
          input: {
            '&:-webkit-autofill': {
              WebkitBoxShadow: '0 0 0 100px #303030 inset',
              WebkitTextFillColor: '#fff',
        },
      },
    },
    }
}

【讨论】：