为材质ui自动完成功能的TextField子元素设置样式

Question

我正在使用Material UI自动完成字段（https://material-ui.com/api/autocomplete/#css），已经能够修改自定义自动完成组件在其自己的根目录上具有的所有内容，但不能修改具有填充的TextField的变体样式的renderInput。当前的类是这样的：

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

我可以影响inputRoot：{}的背景颜色，但根本无法删除这些填充。我只希望该组件具有这种外观，因为它们在其上方的标签上添加了填充。

Codebox

Answer 1

您需要匹配默认样式的specificity才能成功覆盖它。默认样式具有类选择器和属性选择器。您可以通过在inputRoot类样式中嵌套相同的属性选择器来匹配这种特性，如下所示：

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