材質 ui，如何更改自動完成文本字段的背景顏色、字體顏色、邊框顏色

Question

如何更改此 material-ui 自動完成文本字段（組合框）的背景顏色、字體顏色和邊框顏色？ 我想使用 css。 這是我到目前為止所嘗試的。

    <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

由於您想使用 css，您可以像這樣更改 colors：

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

您可以查看此沙盒以獲取實時工作示例。