更改 mat-form-field 中的边框颜色

Question

我正在使用角材料 mat-form-field 。我有一个深色背景，因此正在尝试将表单域的边框更改为白色。但我无法使用 css 实现它。不，无论我在 css 中做了什么更改，它们都不会反映到 mat-form-field 中。这是我的代码的链接：

StackBlitz 链接到我的工作

任何帮助将不胜感激。谢谢。

原文由 Noober 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将此 CSS 添加到您的 form-field-appearance-example.css ：

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

但是，在专注于该领域时仍然存在问题。

原文由 pzaenger 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 sasa suboticki 发布，翻译遵循 CC BY-SA 4.0 许可协议