Как настроить заполнение в элементе управления автозаполнением Material-UI?

Question

Мне нужно настроить контроль автозаполнения материала-интерфейса, чтобы он не был таким высоким. Я нашел образец, который хорошо работает для изменения цвета контура MuiOutlinedInput с помощью createMuiTheme в TextField автозаполнения. CodeSandbox здесь: Пример кода

Это код переопределения моей темы, и я добавил переопределение для заполнения входного класса:

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 или, возможно, стилизации других частей автозаполнения. Мне просто нужно сделать его не таким высоким.

Спасибо!

Answer 1

Это вопрос получения CSS специфичности для вашего переопределения. Один простой способ повысить специфичность - повторить класс.

В приведенном ниже примере я использую &&& $input, что эквивалентно .MuiOutlinedInput-root.MuiOutlinedInput-root.MuiOutlinedInput-root .MuiOutlinedInput-input:

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

Другой вариант, который немного уродливее, но делает более очевидным, какой стиль по умолчанию вы переопределяете, следующий:

const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "green"
        },
        "&:hover $notchedOutline": {
          borderColor: "red"
        },
        "&$focused $notchedOutline": {
          borderColor: "purple"
        }
      }
    },
    MuiAutocomplete: {
      inputRoot: {
        '&&[class*="MuiOutlinedInput-root"] $input': {
          padding: 1
        }
      }
    }
  }
});

Обратите внимание, что вам все еще нужно удвоить &, чтобы получить специфичность, которая побеждает стили по умолчанию. Эта версия указывает c на автоматическое заполнение, а не на все выделенные входные данные.

Если вы не хотите применять это переопределение ко всему приложению в вашей теме, вы можете просто настроить компонент автозаполнения, используя withStyles как показано ниже:

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { withStyles } from "@material-ui/core/styles";

const NoPaddingAutocomplete = withStyles({
  inputRoot: {
    '&&[class*="MuiOutlinedInput-root"] $input': {
      padding: 1
    },
    "& .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  },
  input: {}
})(Autocomplete);
export default function CountrySelect() {
  return (
    <NoPaddingAutocomplete
      id="country-select-demo"
      style={{ width: 300 }}
      options={countries}
      getOptionLabel={option => option.label}
      renderInput={params => (
        <TextField {...params} label={"Countries"} variant="outlined" />
      )}
    />
  );
}