Guide for updating the background color, font color, and border color in Material UI's autocomplete textfield

Question

Guide for updating the background color, font color, and border color in Material UI's autocomplete textfield

How can I customize the appearance of this material-ui autocomplete textfield (combobox) by changing the background color, font color, and border color using CSS? Here is what I have attempted so far:

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

My CSS class:

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

https://i.sstatic.net/QS3hG.png

https://i.sstatic.net/5Yxbo.png

https://i.sstatic.net/GvCgd.png

css reactjs material-ui

Answer 1

Answer №1

If you're interested in utilizing CSS for color changes, you can achieve it by following this code snippet:

.example fieldset {
  border-color: red;
}

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

.example input {
  color: red;
}

.example label {
  color: red;
}

.example {
  background-color: yellow;
}

For a live demonstration, feel free to check out this interactive sandbox.

Answer 2

If you're interested in utilizing CSS for color changes, you can achieve it by following this code snippet:

.example fieldset {
  border-color: red;
}

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

.example input {
  color: red;
}

.example label {
  color: red;
}

.example {
  background-color: yellow;
}

For a live demonstration, feel free to check out this interactive sandbox.

Guide for updating the background color, font color, and border color in Material UI's autocomplete textfield

Answer №1

Similar questions

Is there a way to ensure my function runs as soon as the page starts loading?

Utilizing blend modes to invert colors

Error: React is throwing a SyntaxError because a ")" is missing in the argument list

Pagination feature in MUI DataGrid table is malfunctioning

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

When the draggable item is released near the drop zone, allow drag and drop to combine

There is zero gutter in Bootstrap

Accordion styling using CSS

Channeling attention to the modal by concealing background content

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

Styling a half circle in React Native

JavaScript personalized video controls. Silence the video by manipulating the input range element

Tips for accessing jQuery UI tab elements and adjusting visibility for specific panels

What is the best way to implement a dynamic Menu Component in next.js?

Ways to retrieve interface definition using a variable

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

Eliminating redundant files in the upload section

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

Align text vertically within labels and links styled with bootstrap

React Router integration problem with Semantic UI React