angular - 删除 Angular Material 文本框边框，不影响其他组件

Question

有没有什么办法可以去除Material Textbox的轮廓边框而不需要Ng深，影响其他组件？

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

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