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

时间:2019-07-15 08:15:45

标签: css angular datepicker material

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

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

3 个答案:

答案 0 :(得分:0)

使用::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;
}

答案 1 :(得分:0)

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

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

WindowManager

答案 2 :(得分:0)

您可以使用:: 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;
}