Question

我最近开始使用Angular2 datepicker。但是，我找不到如何编辑日期选择器的颜色/边框/字体/等。

我检查了datepicker的元素，使用了class =“ wc-date-container”并将其放置在css文件中，在其中我添加了这些内容，但是它不起作用。这是我的angular component.html和CSS文件的一部分。

<angular2-date-picker
   [(ngModel)]="search.date_from"
   [ngModelOptions]="{standalone: true}"
   [settings]="timeSettings" >
</angular2-date-picker>

.wc-date-container {
    border: 1px solid rgba(155, 151, 151, 0.911);;
}
.wc-date-container > span {
    color: rgba(155, 151, 151, 0.911);
}
.wc-date-container > i {
    font-size: 20px;
    color: rgba(155, 151, 151, 0.911);
}

非常感谢您的光临。我希望我不会遗漏一些重要的细节。我检查了其他答案，但没有找到解决这个问题的答案。我使用了https://jsfiddle.net/solomon301/s3hL05s6/这个小提琴的一部分。

Answer 1

Angular使用阴影DOM ，如here所述。

datepicker使用自定义组件，因此它们的CSS类不会与组件的CSS（这是css encapsulation）冲突。

您可以做的是将css类放在全局文件中，该文件通常称为style.css，位于根文件夹中。

This question解释了如何正确执行此操作。

CSS编辑angular2日期选择器不起作用

1 个答案: