0

So, the problem is as in the title of this post. Here's my component. It's just regular MUI text field:

 <TextField
          onChange={(e) => {
            handleSetUserData(e);
          }}
          sx={{ marginTop: "10px" }}
          fullWidth
          required
          variant="filled"
          label="Username"
          name="userName"
          inputProps={{ maxLength: 12 }}
        />

If I type manually color will stay the same. Any suggestions on how this could be fixed? All the text fields are also inside single FormControl btw.

meAndrew
  • 144
  • 1
  • 13
  • 1
    its probably the browser autofill defaults, you can find a solution here that might help you https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete – Breezer Dec 05 '22 at 03:57
  • @Breezer that's not solved my problem, but that gave me the idea of where should I look for solution. And I found the way to fix that) – meAndrew Dec 05 '22 at 05:13

1 Answers1

0

Ok, I've found the way to fix that. With MUI 5 theme:

const myTheme = createTheme({
  components: {
    MuiTextField: {
      styleOverrides: {
        root: {
          input: {
            "&:-webkit-autofill": {
              WebkitBoxShadow: "0 0 0 100px #E0D98C <<<<(Your color here) inset",
              WebkitTextFillColor: "default",
            },
          },
        },
      },
    },
  },
});

It works for variant="standart" and variant="outlined" but works not that well for variant="filled", cause it has some shadow effect on background. But I guess if you can tap into variant with the theme, it could be fixed. If not - just change the variant to outlined, as I did)

meAndrew
  • 144
  • 1
  • 13