Change color label

Question

I use angular material and I have this input:

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

when I press on the input the label goes on the top and change color,

I want change the last label select on the image, so I do:

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

But It doesn't work.Anyone can help me?

Answer 1

If you want to style elements in the child - at this moment, the child is the <mat-form-field> and the parent is your component, then you need to use

::ng-deep

It allows you to reach the child from your parent ( you can read more about that here ) https://angular.io/guide/view-encapsulation

So the answer to your question would be

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