How to customize the angular material forms field - angular8

Question

I tried customizing the angular material forms field using ::ng-deep in my angular project the problem I am facing is css applied gets applied only I refresh the page or when I click on it.
I tried using ::ng-deep and tried to set the Encapsulation.None on my ts files.
<div class="input-row">
<div class="call-out-grt">
<div class="box">
<mat-label class="arrival">GRT-NRT-DWT</mat-label>
<div class="box-1">
<mat-form-field class="cranes" appearance="outline">
<input matInput type="text">
</mat-form-field>
</div>
<div class="box-1">
<mat-form-field class="cranes" appearance="outline">
<input matInput type="text">
</mat-form-field>
</div>
<div class="box-1">
<mat-form-field class="cranes" appearance="outline">
<input matInput type="text">
</mat-form-field>
</div>
</div>
</div>
<div class="call-out">
<mat-form-field class="flag-field">
<input matInput type="text" placeholder="Flag">
</mat-form-field>
</div>
<div class="call-out-date">
<mat-form-field class="flag-field">
<input matInput type="text" placeholder="Built Date">
</mat-form-field>
</div>
</div>
::ng-deep .cranes .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline {
width: 55px ;
height: 50px;
margin-left: 2px;
}
The form css should get applied without refreshing it