css - 更改颜色标签

Question

我使用有角度的材料，我有这个输入：

 <mat-form-field appearance="legacy" class="col-sm-12 col-lg-6 w-100 p-3">
                    <mat-label>"outline from field"</mat-label>
                    <input matInput formControlName="idModulo">
                </mat-form-field>

当我按下输入时，标签位于顶部并更改颜色，

我想更改图像上的最后一个标签选择，所以我这样做：

.mat-form-field-should-float {
  color: black;
}

但它不起作用。任何人都可以帮助我吗？

Answer 1

如果你想在子元素中设置样式 - 此时，子元素<mat-form-field>是你的组件，父元素是你的组件，那么你需要使用

::ng-deep

它允许您从父母那里联系到孩子（您可以在此处阅读更多相关信息）https://angular.io/guide/view-encapsulation

所以你的问题的答案是

 :host {
  ::ng-deep {
    .mat-form-field {
      &.mat-focused {
        .mat-form-field-label {
          color: blue;
        }
      }
    }
  }
}