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

Question

我最近开始使用 Angular2 日期选择器。但是，我找不到如何编辑日期选择器的 color/borders/font/etc。

我检查了日期选择器的元素，使用了 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);
}

非常感谢您的观看。我希望我没有遗漏一些重要的细节。我检查了其他答案，但没有找到解决这个问题的答案。我使用了这个 fiddle https://jsfiddle.net/solomon301/s3hL05s6/.

的部分内容

Answer 1

Angular 使用 阴影 DOM，如 .

所述

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

你可以做的是将 css 类放在一个全局文件中，通常称为 style.css，在根文件夹中。

解释了如何正确地做到这一点。

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

CSS editing angular2 datepicker doesn't work

datepicker

responsive-design

typescript

angular