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

Question

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

<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>

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

标签： cssangular-material

Answer 1

我不知道确切的原因，但要覆盖有角度的材质样式，您必须在您的 styles.css （全局）中添加您的 CSS。所以在那个文件中，你可以覆盖你需要的任何属性。

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

看看这个工作示例。