Пользовательский стиль Angular Bootstrap popover не работает - PullRequest
Новая
       37

Пользовательский стиль Angular Bootstrap popover не работает

0 голосов
/ 05 февраля 2019

У меня есть загрузчик popover в одном из дочерних компонентов "child-component".Стили Bootstrap и popover работают нормально, но я хотел бы добавить собственный стиль.

Я настроил popover, как показано ниже в "child-component.html" 

[attr.data-trigger]="'click'"
[attr.data-toggle]="'popover'"
[attr.data-placement]="'top'"
[attr.data-container]="'child-component'"

Я ввел его в стили"child-component.scss" как 

.popover {
    border: 1px solid #007CCA !important;
  }

  .popover.right .arrow:after {
    border-right-color: blue;
  }

это не сработало, поэтому попробовал это 

:host >>> .popover { background-color: #009688; color: #fff; }

Это тоже не сработало !!

HTML структураесли это поможет 

<child-componet id="childComp">
<section>
    <div class="basicInfo">
        <div></div>
    </div>
    <div class="additinalComp">
        <div *ngIf="dataAvailable">
            <span>Total Amount</span><span>{{amount}}</span><i tabindex="{{i}}"
                        [attr.data-content]="info"
                        class="infoPopover"
                        [attr.data-trigger]="'click'"
                        [attr.data-toggle]="'popover'"
                        [attr.data-placement]="'top'"
                        [attr.data-container]="'child-component section'"></i>
        </div>
    </div>
</section>
</child-componet>

Так же, как и при начальной загрузке моего стиля.Прикладной стиль отсутствует на инструментах контроля.Этот класс .popover с содержимым появляется только после нажатия.Я использую .scss в angular есть ли способ, которым я могу этого достичь?

1 Ответ

0 голосов
/ 05 февраля 2019

Я использовал

:: ng-deep

вместо

или

/ deep / или >>>

as 

:host ::ng-deep .popoverr {
  border-right-color: blue;
}

Это решило мою проблему.

Большое спасибо!

...