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 Customize Material-UI TextField Text Color, Alignment, Width and Height

Material-UI is a fantastic React Component library. Customizing the components, especially TextField, often does not feel so fantastic. ***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply insert the styling code directly into the sx prop instead of using makeStyles and classes. I am … Read more

How to Override Material UI Default Styling When All Else Fails

Overwrite Material UI Styles

Anyone using Material UI has been there: you tried every trick and yet Material UI default styling is overriding your custom styling. This happens with padding, margin, colors, and more. Worry no more, I’m about to give you the Material UI bazooka. (If you haven’t tried every trick in the book, then simply start with … Read more