reactjsmaterial-uiautocomplete

Style the TextField children of the Material UI autocomplete


I am using the Material UI autocomplete field (https://material-ui.com/api/autocomplete/#css) I have been able to modify everything my custom Autocomplete component has on its own root but not renderedInput of the variant style that is a filled TextField. Currently the class is as such:

.MuiAutocomplete-inputRoot[class*="MuiFilledInput-root"] {
    padding-top: 19px;
    padding-left: 8px;
}

I can affect the background color of inputRoot:{} but cannot remove these paddings at all. I only want this component to look this way since they add padding for the label above it.

Codebox


Solution

  • You need to match the specificity of the default styles in order to override it successfully. The default styles have a class selector plus an attribute selector. You can match this specificity by nesting the same attribute selector within your inputRoot class styles as shown below:

    const CustomAutocomplete = withStyles({
      inputRoot: {
        backgroundColor: "white",
        border: "solid",
        '&[class*="MuiFilledInput-root"]': {
          paddingTop: 0,
          paddingLeft: 0
        }
      }
    })(Autocomplete);
    

    Edit Override Autocomplete inputRoot styles