Как я могу изменить цвет стрелок навигации ngb-datapicker?

Я использую этот 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;
}

И я не могу понять, как изменить цвет синих стрелок в пакете данных


angular ng-bootstrap ngb-datepicker
person Jose Mosquera    schedule 03.05.2019    source источник
comment
Попробуйте проверить элемент и найти идентификатор стрелки, чтобы вы могли изменить его на css   -  person Flavio Caruso    schedule 03.05.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно будет использовать селектор псевдокласса :: ng-deep для нацеливания на дочерние элементы компонента. Описание этого процесса приведено здесь: https://blog.angular-university.io/angular-host-context/ Обратите внимание, что :: ng-deep скоро будет сокращен и удален. Насколько я понимаю, решения по замене еще нет, поэтому в настоящее время нам нужно продолжать его использовать.

РЕДАКТИРОВАТЬ: этот код работал над моим проектом, я поместил его в компонент CSS для компонента, где я вызвал ngb-datepicker:

::ng-deep div.ngb-dp-arrow > button {
  color: red;
}
person Bill Gardner    schedule 03.05.2019
comment
Я пробовал код, который вы пишете, но у меня он не работает - person Jose Mosquera; 06.05.2019
comment
Не могли бы вы объяснить, как я могу вам помочь? - person Bill Gardner; 06.05.2019
comment
Я отредактировал свой ответ, чтобы отразить фактический код, который работал для изменения кнопок со стрелками шеврона. - person Bill Gardner; 09.05.2019
comment
Отлично, теперь он работает. Я помещаю этот код в общий css и не работаю, но когда я помещаю его в css компонента, то работает !! Большое спасибо!! - person Jose Mosquera; 10.05.2019