I have an app built with React.js and Material UI, and have issue with the background color for auto-plete 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 ponent I'm using now.

Any advice would be appreciated. Thank you!

I have an app built with React.js and Material UI, and have issue with the background color for auto-plete 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 ponent I'm using now.

Any advice would be appreciated. Thank you!

• javascript
• reactjs
• material-ui

• 1 Could you clarify why do you name fields as auto-plete but use TextField ponent. How is value set to "Participant Email" to cause this styles? Could you attach screen shot of this ponent in DOM to see what classes it has? – Anastasiya Stanevich Commented Jun 21, 2023 at 10:47
• Hi @AnastasiyaStanevich Thanks for your reply, here's the screenshot i.imgur./ijMxXlW.png – dreambold Commented Jun 21, 2023 at 16:08

3 Answers 3

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 mon input tag) .MuiInputBase-input.

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

I have recently faced this issue and tried various solution. Finally following solution work :

<TextField
            sx={{
                // Fix for autofill color
                '& input:-webkit-autofill': {
                    transition:
                        'background-color 600000s 0s, color 600000s 0s'
                }
            }}
        />

I am using MUI textfield here. Hope this is usefull.

Try adding the following style:

   sx={{
            '& .Mui-focused.MuiAutoplete-input': {
                color: "blue"
            },
        }}

You need to override mui style to achieve your goal, so if the above code won't work, try to experiment and see what mui class or bination of classes is responsible for adding the background color on autoplete.