Разработайте стиль TextField для потомков материала, используя автозаполнение

Question

Я использую поле автозаполнения пользовательского интерфейса материала (https://material-ui.com/api/autocomplete/#css). Мне удалось изменить все, что есть в моем собственном компоненте автозаполнения, root, но не отображено в виде варианта варианта, который является заполненный TextField. В настоящее время класс таков:

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

Я могу влиять на цвет фона ввода Root: {}, но вообще не могу удалить эти отступы. Я только хочу, чтобы этот компонент выглядел так, так как они добавляют отступ для надписи над ним.

Codebox

Answer 1

Вам необходимо соответствовать специфичности стилей по умолчанию, чтобы успешно переопределить его. Стили по умолчанию имеют селектор класса плюс селектор атрибута. Вы можете сопоставить эту специфику, вложив тот же селектор атрибута в стили вашего класса inputRoot, как показано ниже:

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