首页 > 解决方案 > CSS材质角

问题描述

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

> 材料图片 <

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

标签: angular

解决方案


如果使用 scss,则可以选择具有上述规则的元素。

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

在那里你可以添加你不能改变的属性,


推荐阅读