How to change size of angular materail outline border?

Question

Im using angular materials. I do not know how to change the size of the border when focusing. I do not want the thickness to be seen.

  <form class="example-form">
  <mat-form-field  appearance="outline" class="example-full-width">
    <input matInput placeholder="Email" [formControl]="emailFormControl">
    <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
      Please enter a valid email address
    </mat-error>
    <mat-error *ngIf="emailFormControl.hasError('required')">
      Email is <strong>required</strong>
    </mat-error>
  </mat-form-field>
</form>

Answer 1

Angular material is quite tricky to use (at least in the beginning). The ideal solution is to create a custom theme, that suits your needs. You can check how to do that over here:

https://material.angular.io/guide/theming

If you want a quick fix, tho, a simple way of doing this is by using ::ng-deep in your CSS file, such as:

::ng-deep .material-class {
   border: none;
}

::ng-deep is deprecated tho, and it will soon stop working. You should really create a specific theme for your application.