材质 ui，如何更改自动完成文本字段的背景颜色、字体颜色、边框颜色

Question

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

Answer 1

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.