小编cak*_*nyc的帖子

我需要自定义 material-ui 自动完成控件，所以它不是那么高。我发现一个示例可以很好地使用自动完成文本字段上的 createMuiTheme 更改 MuiOutlinedInput 轮廓颜色。代码沙盒在这里：代码示例

这是我的主题覆盖代码，我为输入类的填充添加了一个覆盖：

const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&:hover $notchedOutline": {
          borderColor: "red"
        },
        "&$focused $notchedOutline": {
          borderColor: "purple"
        },
        "& $input": {
          padding: "1px"
        }
      }
    }
  }
});

这是组件代码：

 <Autocomplete
  id="country-select-demo"
  style={{ width: 300 }}
  options={countries}
  getOptionLabel={option => option.label}
  renderInput={params => (
    <MuiThemeProvider theme={theme}>
      <TextField {...params} label={"Countries"} variant="outlined" />
    </MuiThemeProvider>
  )}
/>

问题是我对输入类的填充被这个覆盖了：

.MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input

我可以做些什么来使我的自定义不被上述覆盖？除了 createMuiTheme 之外，我还对其他技术持开放态度，或者对自动完成的其他部分进行样式设置。我只需要让它不那么高。

谢谢！