删除垫形式字段轮廓间隙答案

【问题标题】：remove mat-form-field outline-gap删除垫形式字段轮廓间隙
【发布时间】：2020-04-22 17:23:41
【问题描述】：

注意到轮廓间隙了吗？我想要那个关闭。我不希望有差距，我想要一个持续的边界。

我试过了

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

【问题讨论】：

你说的是哪个差距？请截取屏幕截图并缩小差距并上传到 imgur，以便所有人都能看到

标签： css angular-material

【解决方案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;
}

【讨论】：

【解决方案2】：

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

你可以像这样直接在 Global 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 !important;
}

希望能帮到你。

【讨论】：

不，我不想使用ViewEncapsulation。这可能会导致更多的问题，而不仅仅是试图修复边界。我没有精力处理 ViewEncapsulation 带来的一连串不确定性，尤其是在我正在处理的那种项目中
我已经更新了我的答案，如果您不想使用 ViewEncapsulation，它也可以这样工作。