从建议中选择文本时，TextField 背景更改背景颜色答案

【问题标题】：TextField Background change background color when selecting a text from sugestions从建议中选择文本时，TextField 背景更改背景颜色
【发布时间】：2021-04-06 19:45:51
【问题描述】：

所以，我有一个 Material UI TextField 控件，目前正在从建议中选择文本后更改它的背景颜色。

<TextField 
  id="username"
  name="username"
  size="small"
  variant="outlined"
  className={classes.inputFields}
  value={ username || "" }
  onChange={event => setUsername(event.target.value)}
  InputProps={{
    className: classes.multilineColor
  }}
  fullWidth/>

如何保持我当前的背景颜色？

【问题讨论】：

这些样式来自浏览器，您可以按照stackoverflow.com/a/14205976/368697中的说明设置样式
你的背景颜色是什么样子的，你能在 CodeSandbox 上添加图片或现场演示吗？

标签： reactjs material-ui

【解决方案1】：

我最近遇到了同样的问题，可以用以下代码解决它：

...

const useStyles = makeStyles((theme) => ({
  input: {
    "&:-webkit-autofill": {
      WebkitBoxShadow: "0 0 0 0 100px " + theme.palette.primary.main + " inset",
      backgroundColor: "#fafafa !important;",
      backgroundClip: "content-box !important",
    },
  },
}));

...

const yourComponent = () => {
  const classes = useStyles();
  
  ...

  return (
     <TextField 
         id="username"
         name="username"
         size="small"
         variant="outlined"
         className={classes.inputFields}
         value={ username || "" }
         onChange={event => setUsername(event.target.value)}
         inputProps={{ className: classes.input }}
         fullWidth
     />
     ...
  );

}

【讨论】：