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

Question

有什么方法可以去除 Material Textbox outline borders 而不会影响其他组件？

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

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

目前正在使用大纲 material 文本框，

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

Answer 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

Answer 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 最终可能会被弃用。

之后你的选择是

将组件视图封装设置为 none、
或者使用全局样式 sheets 和普通的旧 css 技巧来保证它的安全和封装。

个人更喜欢全局样式 sheets，因为视图封装 None 如果您做事不正确，可能会产生奇怪或错误。而全局 sheet 中的错误通常更容易被发现。只需像 'no-outline' 一样对它们应用 class 并在全局 sheet 中定义它。标准 css 仍然可以完成工作

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

Remove Angular Material Textbox border, without Ngdeep affecting other Components

typescript

material-design

angular-material

angular

angular7