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

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

0 голосов
/ 03 мая 2019

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

1 Ответ

0 голосов
/ 03 мая 2019

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

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

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