MUI TextField Background Color for auto complete

I have an app built with React.js and Material UI, and have issue with the background color for auto-complete fields.

It adds white background which isn't necessary.

But when I add text manually, this doesn't happen:

<TextField type={props.type ? props.type : 'text'} sx={{ color: '#fff' }} value={props.value} onChange={(e) => props.changeEvent(e.target.value)} label={<Typography variant="body2" sx={{ color: '#fff' }}>{props.placeholder}</Typography>} borderColor="white" fullWidth />

This is the component I'm using now.

Any advice would be appreciated. Thank you!

the issue is not with Material styles it's browser autofill behaviour. You should override browser's autofill styles.

Here there's one pitfall: color which is set as background for autofill set with box-shadow NOT background-color, that's why you can't use transparent to override. But you can use you background color (here you blue background #307ECC).

As well you can override text color for autofill to white using -webkit-text-fill-color property.

Here is css for reset:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
   -webkit-box-shadow: 0 0 0 30px #307ECC inset !important;
   -webkit-text-fill-color: #ffffff !important;
}

or you can use mui class for it (instead if common input tag) .MuiInputBase-input.

<TextField
    sx={{
        'color': '#ffffff',
        '&:-webkit-autofill': {
            WebkitBoxShadow: '0 0 0 100px #307ECC inset',
            WebkitTextFillColor: 'ffffff',
        },
    }}
    // ... rest of your props
/>;