Изменение цвета границы в поле mat-form-field

Question

Я использую угловой материал mat-form-field. У меня темный фон, и поэтому я пытаюсь изменить границу поля формы на белый. Но я не могу добиться этого с помощью CSS. Нет, какие бы изменения я ни делал в css, они не отражаются обратно в mat-form-field. Вот ссылка на мой код:

StackBlitz ссылка на мою работу

Любая помощь будет принята с благодарностью. Спасибо.

Answer 1

Для более новых выделенных полей формы, решить это следующим образом:

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

Я думаю, что это покроет все.

// mat-icon-stepper selected color change 
::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
    background-color: red!important;
}

//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: red!important;
    // opacity: 1!important;
}

//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: red!important;
}

// mat-input error outline color
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
    color: red!important;
    opacity: 0.8!important;
}

// mat-input carent color
::ng-deep .mat-input-element {
    caret-color: red!important;
}

// mat-input error carent color
::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
    caret-color: red!important;
}

// mat-label normal state style
::ng-deep .mat-form-field-label {
    color: rgba(0,0,0,.6)!important;
    // color: $mainColor!important;
}

// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: red!important;
}

// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: red!important;
}

Answer 3

Добавьте этот CSS к вашему form-field-creation-example.css :

/* Border */
.mat-form-field-appearance-outline .mat-form-field-outline {
  color: white;
}
/* Font color */
input.mat-input-element {
  color: white;
}

Тем не менее, проблема остается, когда поле сфокусировано.