This is my code, the icon to open the textfield comes by default with a dark color and the background that I have is also dark, so it is hardly visible. I would like to put a white color on it. I have done it in a Textfield and it has worked for me, but being a child of Autocomplete it does not work.
const useStyles = makeStyles({
inputRoot: {
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "white",
borderWidth: "2px",
},
color: "white",
fontFamily: "Bebas-Bold",
fontSize: "18px",
}
})
<Autocomplete
name="countryOfBirth"
onChange={(e) => handleDateCountryUser(e)}
disableListWrap='true'
options={country}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<TextField {...params}
label="country Of Birth *"
variant="outlined"
InputLabelProps={{
classes: {
root: classes.inputs,
},
}}
/>
)}
classes={{
inputRoot: classes.inputRoot,
root: classes.inputs,
option: classes.selectFont
}}
/>
</Grid>