如何覆盖 ng2-date-picker 的 dp-material css? [英] How to override the dp-material css for ng2-date-picker?

问题描述

目前我正在使用 ng2-date-picker 节点模块，我也在为这个组件使用 theme="dp-material" 主题.我想覆盖该日期选择器组件的 css.请帮我解决这个问题.我尝试了下面的 css 但没有运气.

Currently im using ng2-date-picker node modules, also im using theme="dp-material" theme for this components. i want to override the css for that date picker components. Please help me on this. I tried the below css but no luck.

dp-date-picker {
    color: #000;
    &.dp-material{
      &.dp-day-calendar{
        color:red;
      }
    }
  }

推荐答案

我曾经这样做是为了覆盖这个日期选择器 ( ng2-date-picker ) 来自模块的其他难以更改的 css :

I used to do this for override this date picker ( ng2-date-picker ) an other css from module that are hard to change :

在 *.ts 中

constructor(private elRef: ElementRef) {}

couleurBouton() {

  var header = this.elRef.nativeElement.querySelector('.dp-nav-header');
 if (header) {
  header.style.color = "#c8960f";
} 

  var current = this.elRef.nativeElement.querySelector('.dp-current-month');
 if (current) {
  current.style.border = "1px solid #c8960f";
} 

var selected = this.elRef.nativeElement.querySelector('.dp-selected');
if (selected) {
  selected.style.background = "#c8960f";
    } 

  }

在模板中:

<dp-date-picker (click)="couleurBouton()" theme="dp-material" mode="month" [(ngModel)]="selectedDate" placeholder="Date par mois" [config]="datePickerConfig"></dp-date-picker>  

如果有人有更干净的解决方案，那将是一种乐趣

If someone have a solution more clean it will be a pleasure

这篇关于如何覆盖 ng2-date-picker 的 dp-material css?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！