mat-form-field 轮廓边框颜色

它看起来像边框颜色mat-form-field已经升级

• v15是黑色的
• v12是灰色的

是否可以添加一个选项来更改基础颜色？

的边界mat-form-field由块创建.mdc-notched-outline。您可以将边框设置为此，但它与旧边框重叠，这可能会导致键入时出现删除线标签。

使用 DevTools，您可以看到他们在该块内使用了 3 个元素：__leading, __notch and __trailing。通过改变border-color他们的属性：

::ng-deep .mdc-notched-outline__leading {
  border-color: darkorange !important;
}
::ng-deep .mdc-notched-outline__notch {
  border-color: darkorange !important;
}
::ng-deep .mdc-notched-outline__trailing {
  border-color: darkorange !important;
}

Now mat-form-field有深橙色边框颜色。您还可以更改border-radius到您的表格：

...
::ng-deep .mdc-notched-outline__trailing {
  border-color: darkorange !important;
  border-top-right-radius: 100px !important;
  border-bottom-right-radius: 100px !important;
}

This is Stackblitz 演示.

更新：因为该块没有其他元素，我们可以通过以下方式缩短：

::ng-deep .mdc-notched-outline > * {
  border-color: darkorange !important;
}

更新 2：您还可以通过以下方式根据输入字段的状态应用颜色：

• For 输入未触摸:

::ng-deep .mdc-notched-outline > * {
  border-color: green !important;
}

• For 输入焦点:

::ng-deep .mdc-text-field--focused .mdc-notched-outline > * {
  border-color: darkorange !important;
}

• For 输入错误:

::ng-deep .mdc-text-field--invalid .mdc-notched-outline > * {
  border-color: cyan !important;
}