Пользовательский стиль всплывающего окна Angular Bootstrap не работает

У меня есть всплывающее окно начальной загрузки в одном из дочерних компонентов "child-component". Стиль Bootstrap и 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, могу ли я как-нибудь этого добиться?


angular sass bootstrap-4 bootstrap-popover
person Mayank    schedule 05.02.2019    source источник
comment
Пожалуйста, предоставьте важную часть вашего html, которая должна помочь найти проблему. Также проверьте в devTools, не переопределяет ли стиль по умолчанию ваши стили. Проверьте порядок импорта стилей.   -  person The.Bear    schedule 05.02.2019
comment
@The.Bear добавил структуру HTML, инструмент разработчика не показывает никаких примененных стилей или переопределения с помощью bootstrap .   -  person Mayank    schedule 05.02.2019

Ответы (1)


arrow_upward
1
arrow_downward

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

::ng-глубокий

вместо

or

/deep/ или >>>

as

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

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

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

person Mayank    schedule 05.02.2019