如何在角度5中覆盖ngbPopover的CSS？

Question

我正在使用ng-bootstrap并希望为popover内容添加自定义CSS。 我正在尝试在app.component.css中应用，但它不适用于popover-body。

Answer 1

您可以使用ViewEncapsulation.None。这意味着“风格被包裹在样式标签中并被推到头上”

@Component({
  selector: 'my-app',
  template: `
...  `,
  styles:[`.popover-title{background-color:black;color:white}`],
  encapsulation: ViewEncapsulation.None
})

Answer 2

不，如果您也使用stylesUrl，则可以添加ViewEncapsulation.None。如果您希望ViewEncapsutaion不会影响应用程序的其余部分，那么您的样式可以像.custom .popover-title {...}并将您的ngPopover括起来＆lt; div class =“custom”＆gt; ...＆lt; / DIV＆GT;

//component.css
.custom .popover-title
{
     background-color:black;color:white
}

//component.html
<div class="custom">
   <button type="button" class="btn btn-outline-secondary" placement="top"
        ngbPopover="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." popoverTitle="Popover on top">
  Popover on top
   </button>
</div>

如果这不起作用总是可以“模拟”像

这样的弹出窗口

//in your component.ts add a variable
//customtooltip:boolean=false;
<div [ngbCollapse]="!customtooltip" class="custom-tooltip">
    show me something
</div>
<button (mouseover)="customtooltip=true" (mouseleave)="customtooltip=false">pass over the mouse</button>