TextField Background change background color when selecting a text from sugestions

Question

So, I have a Material UI TextField control and currently is changing it's background color after selecting a text from the sugestions.

<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/>

How can I keep my current bg color?

Those styles come from the browser, you can style them as explained in https://stackoverflow.com/a/14205976/368697 — Ross Allen, Apr 06 '21 at 23:19
What is your background color look like, can you add an image or a live demo on CodeSandbox? — NearHuscarl, Apr 07 '21 at 02:50

score 1 · Answer 1 · answered Apr 07 '21 at 09:55

I recently came across the same issue and could fix it with the following code:

...

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
     />
     ...
  );

}

TextField Background change background color when selecting a text from sugestions

1 Answers1