Angular 材质 DatePicker 隐形

Question

我正在尝试在我的项目中使用 angular 材料日期选择器。 日期选择器本身是不可见的，但是如果我单击它的位置或日历图标所在的位置，它确实可以工作。 为了清楚起见，我在日期选择器旁边添加了一个按钮。 是什么导致日期选择器的行为如此？

不可见日期选择器截图

单击不可见日历图标后的日期选择器屏幕截图

为了清楚起见，我在确实显示的日期选择器旁边添加了一个按钮。

我的 HTML 文件：

 <div> <mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker" /> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field> <button mat-raised-button color="primary">Hello</button> </div>

我的进口：

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import {CoreModule} from './core/core.module'; import {SharedModule} from './shared/shared.module'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule} from '@angular/material/core'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, CoreModule, SharedModule, BrowserAnimationsModule, MatDatepickerModule, MatNativeDateModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Answer 1

我遇到过同样的问题。 我发现其中 2 个预建主题被认为是“Light”（deeppurple-amber.css & indigo-pink.css），2 个被认为是“Dark”（pink-bluegrey.css & Purple-green.css）。

它们都起作用，只是浅色在白色或彩色背景下可见但不是黑色，而深色在黑色或彩色背景下可见但不是白色。

您可以轻松地尝试更改 body 元素的背景颜色。

资源（均来自 Angular 文档）：

• 主题化您的 Angular Material 应用程序
• 主题 Angular 材料