Changing border color in mat-form-field

Question

I am using angular material mat-form-field. I have a dark background, and therefore am trying to change the border of the form-field to white. But I am not able

Answer 1

For the newer outlined form fields, solved it this way:

::ng-deep {
     .mat-form-field-appearance-outline .mat-form-field-outline {
        color: white;
     }
     mat-form-field {
        .mat-hint, input, ::placeholder, .mat-form-field-label {
           color: white;
        }
     }
  }

Answer 2

HTML

<mat-form-field appearance="outline" style="margin: 0 20px;" class="border-red">
     <mat-label>Transaction Number</mat-label>
     <input matInput placeholder="Transaction number" [(ngModel)]="transactionNumber">
</mat-form-field>

SCSS

$color-outline: red;

mat-form-field {
   &.border-red {
      // to change border color
      ::ng-deep .mat-form-field-outline {
           color: $color-outline !important;
      }
      // to change label color
      ::ng-deep .mat-form-field-label {
           color: $color-outline !important;
      }
   }
}

this will work only if you give .border-red class to your mat-form-field.

If you want to apply on all mat-form-field (remove border-red style rule)

$color-outline: red;

mat-form-field {
      // to change border color
      ::ng-deep .mat-form-field-outline {
           color: $color-outline !important;
      }
      // to change label color
      ::ng-deep .mat-form-field-label {
           color: $color-outline !important;
      }
}