删除mat-form-field轮廓间隙

Question

注意到轮廓间隙？我要关闭。我不希望有差距，我希望继续保持边界。

我已经尝试过了

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap:active {
  border-style: solid !important;
}

Answer 1

这是解决方案：

::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-outline-gap {
  border-top-color: initial !important;
}

Answer 2

避免使用 ::ng-deep（已弃用）并避免使用 !important —— 这些不再是好的做法。

你可以像这样直接在css中添加类：

.mat-form-field-appearance-outline
.mat-form-field-can-float
.mat-form-field-should-float
.mat-form-field-outline-gap {
  border-top-color: initial;
}

并在您的 .ts 文件组件装饰器中添加以下内容

encapsulation: ViewEncapsulation.None,

希望能帮到你。