设置材质ui自动完成的TextField子元素的样式 [英] Style the TextField children of the material ui autocomplete

问题描述

我正在使用材质UI自动完成"字段(

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

解决方案

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

这篇关于设置材质ui自动完成的TextField子元素的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！