移除 Angular Material 文本框边框，不影响其他组件的 Ngdeep答案

【问题标题】：Remove Angular Material Textbox border, without Ngdeep affecting other Components移除 Angular Material 文本框边框，不影响其他组件的 Ngdeep
【发布时间】：2020-04-02 22:24:24
【问题描述】：

有没有什么方法可以去掉Material Textbox的外框边框没有Ng deep，影响其他组件？

下面需要去掉边框，这段代码会影响页面内的其他组件

How to remove the outline mat-form-filed border corner radius

::ng-deep div.mat-form-field-outline-start{
    border-color: 0 !important;
    border-width: 0px !important;
}

::ng-deep .mat-form-field-outline-gap{
    border-color: 0 !important;
    border-width: 0px !important;
}

::ng-deep .mat-form-field-outline-end{
    border-color: 0 !important;
    border-width: 0px !important;
}

目前使用大纲素材文本框，

<div class="input-wrap">
    <mat-form-field appearance = "outline">
        <input matInput test >
    </mat-form-field>
</div>

【问题讨论】：

标签： angular typescript angular-material material-design angular7

【解决方案1】：

如果您将外观属性从轮廓更改为标准，那应该会删除您的边框

<div class="input-wrap">
    <mat-form-field appearance = "standard">
        <input matInput test >
    </mat-form-field>
</div>

这包含与您可以插入表单字段的不同外观相关的更多信息：

https://material.angular.io/components/form-field/overview#form-field-appearance-variants

【讨论】：

【解决方案2】：

您应该将它们包装在主机选择器中，这样未封装的 css 就不会泄漏：

:host ::ng-deep div.mat-form-field-outline-start{
    border-color: 0 !important;
    border-width: 0px !important;
}

:host ::ng-deep .mat-form-field-outline-gap{
    border-color: 0 !important;
    border-width: 0px !important;
}

:host ::ng-deep .mat-form-field-outline-end{
    border-color: 0 !important;
    border-width: 0px !important;
}

这将确保样式仅适用于宿主组件的上下文。

Ng-deep 最终可能会被弃用。

之后你的选择是

将组件视图封装设置为无，
或者使用带有普通 CSS 技巧的全局样式表来保证它的安全和封装。

个人更喜欢全局样式表作为视图封装如果你没有做正确的事情，没有一个可能会产生奇怪或错误。而全局表中的错误通常更容易看到。只需对它们应用一个类，如“无大纲”，然后在全局工作表中定义它。标准 css 仍然可以完成工作

【讨论】：

ng-deep 最终会被弃用，但我认为不会很快。之后您的选择是将您的组件视图封装设置为无，或者使用具有普通旧 css 技巧的全局样式表来保证它的安全和封装。我个人更喜欢全局样式表作为视图封装如果你做的不对，没有一个可能会产生奇怪或难以捕捉的错误。而全局工作表中的错误通常更容易看到。
是的，只需对它们应用一个类，如“no-outline”，并在全局工作表中定义它。标准 css 仍然可以完成 IMO 的工作