设置材质 ui 自动完成的 TextField 子项的样式答案

【问题标题】：Style the TextField children of the material ui autocomplete设置材质 ui 自动完成的 TextField 子项的样式
【发布时间】：2020-08-08 14:11:11
【问题描述】：

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

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

我可以影响 inputRoot:{} 的背景颜色，但根本无法移除这些填充。我只希望这个组件看起来像这样，因为它们为它上面的标签添加了填充。

Codebox

【问题讨论】：

如果我理解正确，您希望设置TextField 的样式。为什么不能像为CustomAutocomplete 那样创建一个样式化的TextField 版本？
我想我可以做到，但是通过这个练习，我正在尝试学习如何深入了解组件和儿童风格。

标签： reactjs material-ui

【解决方案1】：

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

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

【讨论】：