Угловая мат-форма-поле не будет расширяться

Question

Резюме: Я хочу расширить поле ввода на моей странице.

Когда я проверяю, на экране появляется надпись «div.mat-form-field-infix 300x51.5, а справа - ширина: 180px; в поле ввода указано 300x24

* 1006».* Пробовал: После просмотра угловых 5 материалов - поля формы застряли на 180px Я попробовал следующее:

<mat-form-field style="width:500px !important">

Затем я попытался:

.input-full-width {
width: 400px;
}

.

<mat-form-field class="input-full-width">

Тогда я попробовал:

.mat-form-field-infix {
width: 480px;
}

Код:

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>

Ожидается : расширить поле ввода

Фактически : Без изменений

Answer 1

Попробуйте ng-deep заменить существующий стиль

html-код:

<mat-form-field class="width-480"></mat-form-field>

css-код:

::ng-deep .width-480{
    width: 480px;
}