我正在研究有角材料的日期选择器,它将在黑色背景上。如何更改将日期选择器图标,下划线和占位符文本的默认颜色更改为全白色?
<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>
答案 0 :(得分:0)
使用::ng-deep
并选择那些元素:
::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;
}