Angular mat-form-field will not widen - html

Question

Summary:
I want to widen the input box on my page.
When I Inspect, on the screen it says "div.mat-form-field-infix 300x51.5 and on the right it says a width: 180px;
The actual input box says 300x24
Tried:
After looking at angular 5 material - form fields stuck at 180px I tried the following:
<mat-form-field style="width:500px !important">
Then I tried:
.input-full-width {
width: 400px;
}
.
<mat-form-field class="input-full-width">
Then I tried:
.mat-form-field-infix {
width: 480px;
}
Code:
CSS:
#import '../../../../form-elements.css';
.l-card {
width: 80%;
max-width: 80rem;
}
.logo > img {
display: block;
max-height: 7rem;
max-width: 30rem;
margin: 1rem auto 3rem auto;
}
.mat-radio-button {
display: block;
margin: 1rem auto;
}
.mat-radio-button > ::ng-deep.mat-radio-label {
white-space: normal;
word-break: break-all;
align-items: flex-start;
}
#media screen and (min-width: 1000px) and (min-height: 600px) {
.l-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
}
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 500px;
}
HTML:
<div fxLayoutAlign="center center" *ngIf="!isLoad">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="isLoad">
<p>
Would you prefer to receive the verification code by text message or by email?
</p>
<form [formGroup]="_form">
<div class="center-and-left">
<mat-radio-group>
<mat-radio-button (change)=sO($event) value="phone">Text {{ phone }}</mat-radio-button>
<mat-radio-button (change)=sO($event) value="email">Email {{ email}}</mat-radio-button>
</mat-radio-group>
</div>
<button type="button" mat-raised-button color="primary" (click)="sendC()" [(disabled)]="isDisabled" >Send Code</button>
<div fxLayoutAlign="center start" *ngIf="!isLoaded && showSpinner">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="isLoaded">
<br />
<div class="example-container">
<mat-form-field>
<input matInput (keyup)="someCode($event.target.value)" (keyup.enter)="onSubmit()" type="number" max="6" min="6" placeholder="Please enter verification code" formControlName="code" required>
</mat-form-field>
</div>
<p *ngIf="failedVerfication" class="error">Verification failed. Please retry or press Send Code to have a new code sent to you.</p>
<button mat-raised-button color="primary" type="button" (click)="onSubmit()" [disabled]="isDisabledSubmit">Verify and Sign In</button>
</div>
Expected: To widen the input box
Actual: No change

Answer 1

Try ng-deep to replace the existing style
html code:
<mat-form-field class="width-480"></mat-form-field>
css code:
::ng-deep .width-480{
width: 480px;
}

Answer 2

I guess it's an year late to answer, but the answer is a small change from what Imrul's answer says.
Try ng-deep with !important to override the style and apply whatever the default style is.
::ng-deep .width-480{
width: 480px !important;
}
This would definitely give your expected answer and widen it.