Css материал Angular

Question

У меня проблема с css Материала Angular. Я хочу использовать выбранный компонент, но он очень высокий, и я не знаю, как его изменить.

 <div class="searchBar">
    <mat-form-field appearance="standard">
      <mat-label>Agences</mat-label>
      <mat-select [formControl]="filterBar" multiple>
        <mat-select-trigger>
          {{filterBar.value ? filterBar.value[0] : ''}}
          <span *ngIf="filterBar.value?.length > 1" class="additional-selection">
            (+{{filterBar.value.length - 1}} {{filterBar.value?.length === 2 ? 'autre' : 'autres'}})
          </span>
        </mat-select-trigger>
        <mat-option *ngFor="let agence of agenceList" [value]="agence">{{agence}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>

> Изображение материала <</a>

когда я выбираю элемент в devTools, компонент, занимающий больше всего места, именно этот

<mat-form-field _ngcontent-c4 appearance="standard" class="mat-form-field ng-tns-c10-0 mat-primary mat-form-field-type-mat-select mat-form-field-appearance-standard mat-form-field-can-float mat-form-field-has-label ng-pristine ng-valid ng-touched mat-form-field-hide-placeholder" ng-reflect-appearance="standard">

Answer 1

Я только что попытался надеть это, и оно работает.

    min-height: 10.5;
    max-height: 10.5;

Но если я надену это, это не 1.5em, это больше похоже на 3em.

    min-height: 1.5em;
    max-height: 1.5em;

Это это нормально, что компонент не может сжаться больше этого?

Answer 2

Если вы используете s css, вы можете выбрать элемент с указанным выше правилом.

:host ::ng-deep .mat-form-field {}

и там вы можете добавить свойства, которые вы не можете изменить,