How to Style the Material-UI Autocomplete Component

The Material-UI Autocomplete component and its Popper component can be styled by targeting built-in MUI styling APIs. In this demo I’ll show the selectors required for styling the Autocomplete component. I’ll do basic styling such as font size, border, hover color. An important characteristic of the Autocomplete component is that it has a Popper that … Read more

How to Set Multiple Values Programmatically in Material-UI’s Autocomplete Component

It’s helpful at times to be able to programmatically set values in a component. Often this can be accomplished in a simple manner with useState. For Autocomplete, it was a bit more complicated and difficult to find. After finally getting it working, I realized there was actually an example straight from the docs of programmatically … Read more

How to Use Material-UI Autocomplete’s getOptionLabel, renderInput, and renderOption (Plus Popper Styling)

Many React Material-UI components have incredible customizations out-of-the-box, while some are functional but missing nice-to-have options (I’m looking at you, Table-without-a-search-prop). The Autocomplete component may have the most customization options of any MUI component I’ve seen. Chips, grouping, disabled options, multiselect, custom popup items, fixed options, and more are demoed in the docs. Link to full JavaScript … Read more