如何将颜色更改为 ngbdatepicker 的箭头导航？

Question

我正在项目中使用这个datapicker（范围选择），导航栏中箭头的蓝色不正确，我想更改它。我在 google 和此处进行了搜索，但找不到解决我问题的答案。

我有这个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;
}

而且我不知道如何更改 datapicker

中蓝色箭头的颜色

Answer 1

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

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

::ng-deep div.ngb-dp-arrow > button {
  color: red;
}

如何将颜色更改为 ngbdatepicker 的箭头导航？

How can I change the color to the arrows navigation of the ngb-datapicker?

ng-bootstrap

angular

ngb-datepicker