Remove Angular Material Textbox border, without Ngdeep affecting other Components

Question

Is there any way to remove Material Textbox outline borders without Ng deep, affecting other components?

Need to remove borders below, this code affects other components within the page

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

Currently using outline material textbox,

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

Answer 1

you should wrap these in a host selector so the unencapsulated css doesn't leak:

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

This will make sure the styles only apply in the context of the host component.

Ng-deep will be maybe deprecated eventually.

Your options after that are to

1. Set components view encapulation to none,
2. Or use global style sheets with plain old css tricks to keep it safe and encapsulated.

Personally prefer global style sheets as view encapsulation None has potential to create weird or bugs if you don't do things right. Whereas mistakes in global sheets are usually easier to see. Just apply a class to them like 'no-outline' and define it in a global sheet. Standard css still gets the job done