How to apply two different CSS on mat-form-field in separate pages?

I have mat-form-field on one page:-

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

Following CSS applied:-

 .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 is reflecting as expected.

The problem is I have another mat-form-field on different page and want to apply different CSS(color: green, background-color: white) on the field.

Is it possible to apply different CSS on controls in different page?

Yes, you can add them in each component's css file like this:

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