CODEWITHSUNDEEP
reactjsmaterial-ui
pcproff
pcproff

Reputation: 622

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

Upvotes: 2

Views: 1590

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 80966

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

Upvotes: 2

Related Questions