Question

我对Material Angular的CSS有问题。我想使用选择组件，但该组件非常笨拙，我不知道该如何修改。

 <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>

> Picture of the material <

当我在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

如果使用scss，则可以按照上述规则选择元素。

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

，您可以在其中添加无法更改的属性，

Answer 2

我只是试着戴上它，并且可以使用。

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

但是，如果我戴上它，它不是1.5em，更像是3em。

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

组件收缩不超过正常值是正常的吗？

CSS材质角度

2 个答案: