Как применить два разных CSS к mat-form-field на отдельных страницах?

Question

У меня есть mat-form-field на одной странице: -

<mat-form-field class="form-control-full-width">
    <input type="text" matInput placeholder="First Name"  formControlName="firstNameFC" required>            
    <mat-error *ngIf="hasNewUserError('firstNameFC', 'required') && isNewUserSubmitted">
               First Name is required
    </mat-error>
</mat-form-field> 

После CSS применено: -

 .mat-form-field-label {
    /*change color of label*/
    color: white !important;
  }

  .mat-form-field-underline {
    /*change color of underline*/
    background-color: white !important;
  } 

  .mat-form-field-ripple {
   /*change color of underline when focused*/
    background-color: white !important;;
  }

  .mat-input-element{
    color: white !important;
  }

CSS отражает, как и ожидалось.

Проблема в том, что у меня есть другое поле mat-form на другом листе, и я хочу применить другое CSS (цвет: зеленый, цвет фона: белый) к полю.

Можно ли применить разные CSS к элементам управления на другой странице?

Answer 1

Да, вы можете добавить их в файл css каждого компонента следующим образом:

:host ::ng-deep .mat-form-field-label {
    color: white;
}