CODEWITHSUNDEEP
reactjsmaterial-ui
IBot
IBot

Reputation: 364

TextField Background change background color when selecting a text from sugestions

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?

Upvotes: 2

Views: 818

Answers (1)

yun_jay
yun_jay

Reputation: 1180

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

}

Upvotes: 1

Related Questions