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