2

我在一个项目上使用这个数据选择器（范围选择），导航栏中箭头的蓝色不是正确的，我想改变它。我在谷歌和这里搜索，我找不到解决我问题的答案。

我有这个 HTML：

<div id="calenderDisplay">
  <ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="collapsed"></ngb-datepicker>

  <ng-template #t let-date let-focused="focused">
    <span class="bnt-link" style="color: #12A19A !important;"></span>
    <span class="custom-day"
         [class.focused]="focused"
         [class.range]="isRange(date)"
         [class.faded]="isHovered(date) || isInside(date)"
         (mouseenter)="hoveredDate = date"
         (mouseleave)="hoveredDate = null">
            {{ date.day }}
    </span>
  </ng-template>
</div>

我尝试了所有这些 CSS：

.bnt-link {
    color: #12A19A !important;
}

::ng-deep ul {
    background-color: #12A19A !important;
}

ngb-datepicker {
    position: absolute;
    background-color: white;

    .ngb-dp-header {
        background-color: rgba(52,104,191,1);
    }

    select {
        background-color: rgba(52,104,191,1);
        color: white;
    }
}

::ng-deep .ngb-dp-arrow-btn {
    background-color: black;
}

而且我不知道如何更改数据选择器中蓝色箭头的颜色

4

1 回答 1

2

您将需要使用 ::ng-deep 伪类选择器来定位组件的子级。此处描述了此过程的描述： https ://blog.angular-university.io/angular-host-context/ 请注意 ::ng-deep 很快就会被贬低和删除。我的理解是目前还没有替代解决方案，所以暂时还需要继续使用。

编辑：这段代码适用于我的项目，我将它放在我调用 ngb-datepicker 的组件的组件 CSS 上：

::ng-deep div.ngb-dp-arrow > button {
  color: red;
}
于 2019-05-03T13:12:52.957 回答