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

HTML

     Transaction Number
     

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