material ui, how to change background color, font color, border color of autocomplete textfield

solarissf 0
Viewed 44

How can I change the background color, font color, and border color of this material-ui autocomplete textfield (combobox)? I would like to use css. this is what I have tried so far.

    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={clients}
      className="test"
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />

css class

.test {
  .MuiAutocomplete-listbox {
    color: red;
  }
}

enter image description here

enter image description here

enter image description here

material-ui reactjs css
1 Answers

Since you would like to use css, you can change colors like this:

.test fieldset {
  border-color: red;
}

.test .MuiInputBase-root:hover fieldset {
  border-color: blue;
}

.test input {
  color: red;
}

.test label {
  color: red;
}

.test {
  background-color: yellow;
}

You can take a look at this sandbox for a live working example.

Ahmet Emre Kılınç0
Related