Question 191556 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – 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.

enter image description here

It adds white background which isn’t necessary.

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

enter image description here

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

Tags:

2

Answers


  1. 0

    Try adding the following style:

       sx={{
            '& .Mui-focused.MuiAutocomplete-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 combination of classes is responsible for adding the background color on autocomplete.

    Login or Signup to reply.
  2. 0

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

    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;
 }

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search