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

回答1:

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);

来源：https://stackoverflow.com/questions/61417934/style-the-textfield-children-of-the-material-ui-autocomplete