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

Posted 2023-05-07

【中文标题】更改角度日期选择器材质组件的颜色

【英文标题】：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

【参考方案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