mat-form-field 内的 mat-label 的角度更改焦点颜色

Question

我在第二个示例中的 mat-form-field 中有一个 mat-chip-list： https ://material.angular.io/components/chips/overview。 单击内部时，垫标签和边框底部（我认为它是边框底部）会聚焦并更改颜色。 我怎样才能修改这个颜色？ 默认是角度主题颜色，但我想更改它。

<mat-form-field class="example-chip-list" appearance="fill">
  <mat-label>Favorite Fruits</mat-label>
  <mat-chip-list #chipList aria-label="Fruit selection">
    <mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
      {{fruit.name}}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>
    <input placeholder="New fruit..."
           [matChipInputFor]="chipList"
           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
           [matChipInputAddOnBlur]="addOnBlur"
           (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
</mat-form-field>

我试过但没有奏效：

mat-label:focus{
color: red
}

建立了这个解决方案： 改变 matInput 的颜色，但我不想使用重要的。

Answer 1

如果您想在不使用 ::ng-deep 或 !important 的情况下更改任何 mat 组件的颜色，请将 css 添加到全局样式表中。

就像你的情况一样。 全局.scss：

.mat-focused .mat-form-field-label {
  /*change color of label*/
  color: red;
 }

以下是创建全局样式表的方法： https ://www.tektutorialshub.com/angular/angular-global-css-styles/

另请阅读： https ://material.angular.io/guide/customizing-component-styles

此外 ::ng-deep 现在已弃用，因此最好避免使用 ::ng-deep 而使用全局样式表。