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

【问题标题】：Angular change focus color for mat-label inside mat-form-fieldmat-form-field 内的 mat-label 的角度更改焦点颜色
【发布时间】：2022-07-22 00:22:05
【问题描述】：

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

创建了这个解决方案：Change color of matInput，但我不想使用重要的。

【问题讨论】：

尝试在上课前添加::ng-deep，如果可行，请告诉我，我会在答案中进一步解释
像这里一样工作：stackoverflow.com/questions/54029193/change-color-of-matinput 但我想知道是否还有其他没有重要的解决方案。
有，但您必须准确检查有多少类针对它。如果原始颜色来自.mat-form .mat-label 选择器，则您的.mat-label 将具有较低的优先级。检查检查器有多少个选择器，然后自己添加一个 ::ng-deep
ng-deep 需要穿透angular imaterial本身带来的视图封装

标签： html css angular angular-material

【解决方案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 而是使用全局样式表。

【讨论】：