更改角度日期选择器材质组件的颜色答案

【问题标题】：Change color of angular datepicker material component更改角度日期选择器材质组件的颜色
【发布时间】：2019-11-23 22:05:33
【问题描述】：

我正在开发一个黑色背景的有角材质日期选择器。如何将日期选择器图标、下划线和占位符文本的默认颜色更改为全白色？

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

【问题讨论】：

使用浏览器调试器查找所需元素的类名。得到类名后，就可以用它来改变颜色了。您可能还必须使用 ::ng-deep
::ng-deep 即将被弃用：angular.io/guide/component-styles#deprecated-deep--and-ng-deep

标签： css angular datepicker angular-material

【解决方案1】：

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

【讨论】：

这对我有帮助，我不需要添加::ng-deep。我删除了它，它对我有用。

【解决方案2】：

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

【讨论】：

告诉我更多帮助

【解决方案3】：

请按照以下指南操作：https://material.angular.io/guide/theming#theming-only-certain-components。

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

@import '~@angular/material/theming';

// Just include this next line once in your application, so if you are building
// a file just to theme the datepicker, don't put it here.
@include mat-core();

// Define the datepicker theme.
$datepicker-primary: mat-palette($mat-indigo);
$datepicker-accent:  mat-palette($mat-pink, A200, A100, A400);
$datepicker-theme:   mat-light-theme($candy-app-primary, $candy-app-accent);

// Apply the theme to your component
@include mat-datepicker-theme($datepicker-theme);

【讨论】：

【解决方案4】：

在答案上方设置字体颜色对我不起作用。我用了以下，希望这对某人有所帮助。

改变颜色

.mat-calendar-body-cell-content, .mat-date-range-input-separator {
  color: blue;
}

更改字体大小和粗细

.mat-calendar-body {
  font-size: 16px;
  font-weight: bold;
}

将此添加到styles.css，我正在使用Angular 12 和Angular Material 12

【讨论】：