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

编辑：此代码在我的项目中起作用，我将其放置在我称为ngb-datepicker的组件的组件CSS上：

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

如何更改ngb-datapicker的箭头导航的颜色？

1 个答案: