I cannot change the icon color of a Textfield that is inside an Autocomplete (MATERIAL UI)

Viewed 39

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>
0 Answers
Related