Angular Материал: стиль циновки формы внутри панели инструментов циновки

Question

Я пытаюсь создать панель инструментов, используя mat-toolbar Материала с вводом и выбрать внутри него. Для обоих я использую предоставленные Материалом компоненты (mat-input и mat-select соответственно) внутри mat-form-field с, как рекомендовано. Мой код выглядит так:

<mat-toolbar>

    <mat-form-field appearance="outline">
      <mat-icon matPrefix>search</mat-icon>
      <input type="search" matInput placeholder="Search" />
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-select [(value)]="omitted">
        <mat-option *ngFor="let omitted of omitted" [value]="omitted.slug">
          {{ omitted.name }}
        </mat-option>
      </mat-select>
    </mat-form-field>

  </mat-toolbar>

В данный момент, ввод и выбор слишком высоки, чтобы полностью поместиться на панели инструментов. Я пытаюсь оформить их так, чтобы они подходили (уменьшив height, padding, margin и т. Д. c.). Однако Angular добавляет элементы между mat-form-field и содержащимися элементами. Я не могу стилизовать эти элементы из Sass компонента из-за инкапсуляции вида. Таким образом, даже если я стилизую все, что непосредственно присутствует в моем шаблоне, сгенерированные элементы имеют высоты, поля и отступы, которые вынуждают наблюдаемый элемент находиться за пределами панели инструментов.

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

Отключение инкапсуляции вида по сути было бы то же самое, что и использование глобального стиля.

::ng-deep устарела, поэтому я не могу это использовать.

Я мог бы создавать собственные input и select с нуля, но потом я теряю готовые стили, которые предоставляет Material. Можно ли как-нибудь стилизовать эти компоненты материала, чтобы они поместились на моей панели инструментов?

Answer 1

Я добавил следующие правила в свою глобальную таблицу стилей, чтобы подогнать поле mat-form-field:

[the selector for the mat-form-field I wanted to affect]
    .mat-form-field-flex, .mat-form-field-label-wrapper
        padding-top: 0

    .mat-form-field-wrapper
        padding-bottom: 0

    .mat-form-field-underline
        bottom: 0

    .mat-form-field-infix
        border-top: 0

Answer 2

У меня была похожая проблема, и я решил ее с помощью оборачивания компонента с помощью div, а затем стилизовал его в глобальной таблице стилей с помощью этого

.filters {
    mat-form-field {
        div.mat-form-field-flex {
            align-items: flex-end;
        }

        div.mat-form-field-prefix {
            padding-right: 12px !important;
        }
    }
}

В вашем случае вы можете добавить класс (или идентификатор) к панель инструментов или оберните поле формы с помощью div, чтобы инкапсулировать нужные вам правила.