mat-select style display значение по умолчанию, блок не может быть изменен?

Question

Я новичок в angular. Создал компонент заголовка, и в заголовок я добавил еще один компонент с кодом ниже.

<mat-form-field class="select-comp">
  <mat-label>Fruits</mat-label>

  <mat-select id="select1" class="item-selector">
    <mat-option *ngFor="let fruit of fruits" [value]="fruit.value">
      {{fruit.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

<mat-form-field class="select-comp">
  <mat-label>Vegitables</mat-label>

  <mat-select id="select2" class="item-selector">
    <mat-option *ngFor="let vegitable of vegitables " [value]="vegitable.value">
      {{vegitable.viewValue}}
    </mat-option>
  </mat-select></mat-form-field>

, если я проверяю ".mat-form-field-infix" и ".mat-select-placeholder" css свойства отображения отображаются в виде блока, я попытался переопределить его, используя display: inline !important. но он не работает и отображается как блок на экране, а свойство - это блок, когда мы проверяем. Есть идеи, что не так?