如何在 React 上使用 MUI 应用 -webkit-autofill？答案

【问题标题】：How can I apply -webkit-autofill using MUI on React?如何在 React 上使用 MUI 应用 -webkit-autofill？
【发布时间】：2020-10-17 19:57:17
【问题描述】：

我从“https://stackoverflow.com/questions/57210325/material-ui-change-autofill-background-color-in-textfield”中了解到 -webkit-autofill 编辑背景

我试图将它应用到我的应用程序中，但不知道我需要在哪里添加它。

 "&:-webkit-autofill": {
  WebkitBoxShadow: "0 0 0 1000px black inset",
}

这是我的代码。我申请了输入主题。但是，它并没有改变任何东西。

// Styling TextField
const ValidationTextField = withStyles({
  root: {
    '& input:valid + fieldset': {
      borderColor: 'orange',
      borderWidth: 1,
    },
    '& .MuiOutlinedInput-root':{
      '&:hover fieldset': {
        borderColor: 'orange'
      },
      '&.Mui-focused fieldset': {
        borderColor: 'orange',
      },
    },
    '& input:invalid + fieldset': {
      borderColor: 'orange',
      borderWidth: 1,
      backgroundColor: 'black',
    },

    '& input:valid:focus + fieldset': {
      borderColor: 'orange',
      borderLeftWidth: 5,
      padding: '4px !important', // override inline-style
    },
  },
})(TextField);

//Style MUI
const useStyles = makeStyles((theme) => ({
  root: {
    height: '100vh',
    backgroundColor: 'black',
  },
  input: {
    color: 'orange',
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 1000px black inset",
    }
  },
  formBackground: {
    background: 'black',
  },
  paper: {
    margin: theme.spacing(8, 4),
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  avatar: {
    margin: theme.spacing(1),
  },
  form: {
    width: '100hv',
    height: '100%', // Fix IE 11 issue.
    marginTop: theme.spacing(0),
    color: 'orange',
  },
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
}));

//Label Style
const useLabelStyles = makeStyles({
  root: {
    
    color: 'orange',
    '&.Mui-focused': {
      color: 'orange',
    },
    fontSize: '14px',
  },
});

          <form className={classes.form} noValidate>
            <ValidationTextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              id='email'
              label='Email Address or ID' //language support
              value={login}
              onChange={handleChange}
              name='login'
              autoFocus
              InputProps={{
                className: classes.input,
              }}
              InputLabelProps={{ classes: labelClasses }}
            />
            <ValidationTextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              name='password'
              label='Password'
              value={password}
              onChange={handleChange}
              type='password'
              id='password'
              InputProps={{
                className: classes.input,
              }}
              InputLabelProps={{ classes: labelClasses }}
            />

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

InputProps={{
  classes: {input: classes.input}
}}

您可以查看 DevTools 以确定哪个 MUI 全局类将某些样式应用于某些元素，然后查看 documentation 以了解如何添加或覆盖样式

【讨论】：

我附上了开发元素工具。我试图在我的属性上应用样式，但是，没有什么可以覆盖输入：-internal-autofill-selected
您可以将其添加到您的表单包装器"& input:-internal-autofill-selected": {...}