matInput Label Скрытие в фокусе

Question

Я только начал использовать Angular Material. Я скопировал код из официальных документов ввода материалов.

Но всякий раз, когда я сосредотачиваюсь на вводе, он скрывается, когда плавает.

Перед фокусом

После фокуса

PS: Это происходит с каждым полем формы и вводом. Помогите мне, пожалуйста.

Благодарю вас

РЕДАКТИРОВАТЬ:

Я создал модуль материала, в котором я импортирую все необходимые модули, связанные с материалом, а затем экспортирую его в app.module.ts

material.module.ts

...
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
...

const MaterialComponents = [
    ...
    MatFormFieldModule,
    MatInputModule,
    ...
];

@NgModule({
    imports: [ MaterialComponents ],
    exports : [ MaterialComponents ]
})

app.module.ts

...
import { MaterialModule } from './material/material.module';
import { FlexLayoutModule, MediaChange, MediaObserver } from "@angular/flex-layout";

@NgModule({
    declarations: [
        ...
        routingComponents,
    ],
    imports: [
        ...
        FormsModule,
        ReactiveFormsModule,
        ...

        /* Material Imports */
        MaterialModule,
        FlexLayoutModule,
        NgbModule,
    ],
    providers: [ Title ],
    bootstrap: [ AppComponent ]
})

home.component.html

<form class="form">
        <mat-form-field class="example-full-width" appearance="outline">
            <mat-label>Email</mat-label>
            <input matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher" placeholder="Ex. [e-mail]">
            <!-- <mat-hint>Errors appear instantly!</mat-hint> -->
            <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>

        <button mat-raised-button color="accent">Save</button>
    </form>

Это просто скопировано из официальных материалов.

Версия узла - @12.16.2

Угловая версия - @9.1.3

Answer 1

Оказывается. Я написал это из-за горизонтального переполнения на панели инструментов

styles.css

* {
    overflow-x: hidden;
}

Проблема была решена после того, как я удалил свойство css.