Angular Material日期选择器显示不符官方示例问题求助

我在项目中引入Angular Material基础款date-picker，实际显示效果和官方示例不一致。预期是类似“Choose a date”的简洁浮动标签样式，但当前显示的是“Date du match”标签始终占据输入框上方空间的样式，修改自定义CSS后也没能达到官方效果。

我的HTML代码 #

<mat-form-field appearance="fill">
  <mat-label>Date du match</mat-label>
  <input matInput [min]="minDate" [matDatepicker]="picker">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

尝试过的自定义CSS #

mat-form-field {
  width: 12rem;
  margin: 0;
  padding: 0;
}

input {
  width: 5rem;
  height: 3rem;
}

mat-datepicker-toggle {
  float: right;
}

AppModule代码 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AccueilComponent } from './accueil/accueil.component';
import { HeaderComponent } from './header/header.component';
import { AppRoutingModule } from "./app-routing.module";
import { IdentificationComponent } from './identification/identification.component';
import { CreationMatchComponent } from './creation-match/creation-match.component';
import { InscriptionComponent } from './inscription/inscription.component';
import { CompositionEquipeComponent } from './composition-equipe/composition-equipe.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropdownListJoueurComponent } from './dropdown-list-joueur/dropdown-list-joueur.component';
import { MatSelectModule } from "@angular/material/select";
import { BoutonComponent } from './bouton/bouton.component';
import { MatButtonModule } from "@angular/material/button";
import { InputTexteComponent } from './input-texte/input-texte.component';
import { MatInputModule } from "@angular/material/input";
import { MenuComponent } from './menu/menu.component';
import { MatMenuModule } from "@angular/material/menu";
import { MatIconModule } from "@angular/material/icon";
import { DatePickerComponent } from './date-picker/date-picker.component';
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from '@angular/material/core';
import { TimePickerComponent } from './time-picker/time-picker.component';
import { MatTableModule } from "@angular/material/table";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { HttpClientModule } from "@angular/common/http";

@NgModule({
  declarations: [
    AppComponent,
    AccueilComponent,
    HeaderComponent,
    IdentificationComponent,
    CreationMatchComponent,
    InscriptionComponent,
    CompositionEquipeComponent,
    DropdownListJoueurComponent,
    BoutonComponent,
    InputTexteComponent,
    MenuComponent,
    DatePickerComponent,
    TimePickerComponent
  ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatSelectModule,
        MatButtonModule,
        MatInputModule,
        MatMenuModule,
        MatIconModule,
        MatDatepickerModule,
        MatNativeDateModule,
        MatTableModule,
        BrowserAnimationsModule,
        BrowserModule,
        FormsModule,
        HttpClientModule,
        ReactiveFormsModule
    ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案 #

1. 移除自定义CSS干扰：你写的自定义样式覆盖了Angular Material的默认布局逻辑，直接删掉这些代码，让组件使用官方默认样式。如果需要调整宽度，建议用Angular Material提供的工具类，或者通过::ng-deep针对性修改，避免直接覆盖基础元素样式。

2. 绑定表单控件：官方浮动标签效果依赖表单控件绑定，需要给输入框关联表单控件：

   • 模板驱动表单：给input添加[(ngModel)]="selectedDate"，并在组件类中定义selectedDate变量
   • 响应式表单：在组件类中创建FormGroup，通过formControlName绑定输入框

3. 清理重复模块导入：你的AppModule中重复导入了BrowserModule和BrowserAnimationsModule，这可能导致样式加载异常，删掉重复项，保留一份即可。

4. 验证版本一致性：确保所有@angular/material相关包的版本完全一致，版本不匹配会引发样式显示问题，可通过package.json检查并统一版本。

内容的提问来源于stack exchange，提问作者Paul