Question

我正在研究有角材料的日期选择器，它将在黑色背景上。如何更改将日期选择器图标，下划线和占位符文本的默认颜色更改为全白色？

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

Answer 1

使用::ng-deep并选择那些元素：

See working example

::ng-deep datepicker-value-example .mat-form-field-label{
   color:red;
}

::ng-deep .mat-datepicker-toggle{
   color:red;
}
::ng-deep .mat-form-field-underline{
background: red;
}

Answer 2

只需遵循以下指南：https://material.angular.io/guide/theming#theming-only-certain-components。

您可以执行类似的操作（在某些scss主题文件中：

WindowManager

Answer 3

您可以使用:: ng-deep。这是工作示例https://stackblitz.com/edit/angular-mat-datepicker-qj73og

::ng-deep .mat-focused .mat-form-field-label {
 /*change color of label*/
 color: white !important;
}

::ng-deep.mat-form-field-underline {
 /*change color of underline*/
 background-color: white !important;
} 

::ng-deep.mat-form-field-ripple {
 /*change color of underline when focused*/
 background-color: white !important;;
}

::ng-deep .mat-form-field-label {
 /*change color of label*/
 color: white !important;
}


mat-datepicker-toggle {
 color: white !important;
}

更改角度日期选择器材料组件的颜色

3 个答案: