Как настроить `mat-form-field`

Question

Я пытаюсь переписать mat-form-field стилей, используя ::ng-deep .mat-form-field**.Но я читал, что это скоро будет устаревшим.

Я переопределил некоторые стили, используя ::ng-deep, и это частично решает мою потребность.Но я также хочу использовать значение по умолчанию mat-form-field в некоторых случаях.

В моем случае я уменьшил высоту и удалил дополнительные отступы в нижней части для подсказки, поскольку мне нужно использовать плотные поля в форме, а добавление подсказок добавляет полосы прокрутки.

Но у меня есть некоторые диалоговые окна, в которых я могу использовать стандартное mat-form-field и использовать mat-hint как обычно.

У меня есть приведенный ниже стиль в файле scss, и я импортируюэтот файл в мой компонент scss с использованием @import

::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em;}

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
}

::ng-deep .mat-form-field-wrapper{
    padding-bottom: 0;
}

Может кто-нибудь предложить способ использования обоих стилей, например, расширение поля mat-form и настройка его при применении для моей плотной формыи использовать mat-form-field обычно в других местах?

Answer 1

Я видел, что Материальная команда использует атрибуты типа dense для списков матов.Таким образом, вы можете иметь глобальную настройку в вашем styles.scss, например:

.mat-form-field[dense] {
  .mat-form-field-flex > .mat-form-field-infix {
    padding: 0.4em 0px !important;
  }
  .mat-form-field-label-wrapper {
    top: -1.5em;
  }
  &.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
    transform: translateY(-1.1em) scale(.75);
  }
  .mat-form-field-wrapper{
    padding-bottom: 0;
  }
}

и просто добавить атрибут в ваши поля:

<mat-form-field dense ...

Этот тип атрибутов можно рассматривать как«варианты компонентов», и некоторые методологии CSS предлагают определить класс для него, например, .mat-form-field-dense, но мне больше нравится подход с атрибутами:)

Редактировать: если вы хотите включить этот тип настройки deep вДля вашего компонента вам нужно отключить инкапсуляцию, включая:

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

, который скажет Angular не помечать ваши стили компонентов с помощью атрибута, который инкапсулирует ваши стили для работы только с вашими компонентными компонентами, и не мешает другимкомпоненты подэлементов.Пожалуйста, обратитесь к официальной документации Angular Styles, если вы хотите знать, как она работает;)