css - 如何为 Angular Material 的日期选择器设置背景颜色

Question

我正在尝试在 css 中为 Angular Material 日期选择器中的日历图标添加背景颜色。我没有得到任何改变。

<mat-form-field class="mr3">
    <input matInput [matDatepicker]="startdate" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="startdate"></mat-datepicker-toggle>
    <mat-datepicker #startdate></mat-datepicker>
</mat-form-field>

<mat-form-field class="ml3">
    <input matInput [matDatepicker]="enddate" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="enddate"></mat-datepicker-toggle>
    <mat-datepicker #enddate></mat-datepicker>
</mat-form-field>

看不到任何变化。它显示相同的默认背景颜色。

Answer 1

我不知道确切的原因，但要覆盖 Angular Material 样式，您必须在 styles.css(全局)中添加 CSS。因此，在该文件中，您可以覆盖所需的任何属性。

.mat-datepicker-toggle .mat-icon-button {
  background-color: red;
}
.mat-calendar {
  background-color: lightgreen;
}

看看这个工作example .