Angular 5中如何覆盖ngbPopover的CSS样式？

你遇到的这个问题其实挺常见的——ng-bootstrap的Popover组件是动态渲染到<body>标签下的，而你的app.component.css默认开启了ViewEncapsulation.Emulated（Angular的组件样式封装机制），组件内部的样式无法渗透到组件外部的DOM元素上，所以.popover-body的样式自然就不生效啦。

给你几个靠谱的解决方案，按需选择：

方案1：使用全局样式文件 #

直接在项目的全局样式文件（比如styles.css/styles.scss）里写Popover的样式，这样样式会全局生效，覆盖默认样式：

.popover-body {
  background-color: #f0f8ff; /* 自定义背景色 */
  color: #2c3e50; /* 自定义文字颜色 */
  padding: 1.2rem; /* 调整内边距 */
  border-radius: 0.6rem; /* 自定义圆角 */
}

方案2：用::ng-deep穿透样式封装（推荐限制范围） #

如果不想让样式全局生效，只想作用在当前组件的Popover上，可以在app.component.css里结合:host和::ng-deep来写：

/* :host 表示当前组件的宿主元素，限制样式只影响当前组件关联的Popover */
:host ::ng-deep .popover-body {
  background-color: #ffeaa7;
  font-size: 1.1rem;
  border-left: 3px solid #fdcb6e;
}

⚠️ 注意：::ng-deep虽然目前还能正常使用，但属于Angular的deprecated特性，不过短期内不会移除，如果你追求更严谨的写法，可以看方案3。

方案3：自定义Popover模板并添加类名 #

给Popover的内容模板添加自定义类，再针对这个类写样式，灵活性更高：
首先在组件模板里定义带自定义类的Popover内容：

<ng-template #customPopover>
  <div class="my-custom-popover">
    这是我自定义样式的Popover内容~
  </div>
</ng-template>

<button class="btn btn-primary" [ngbPopover]="customPopover">
  点击查看自定义Popover
</button>

然后在app.component.css里用:host ::ng-deep或者全局样式来写：

:host ::ng-deep .my-custom-popover {
  background-color: #dfe6e9;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

避坑提醒 #

别轻易用ViewEncapsulation.None关闭组件样式封装，这样会让你组件里的所有样式变成全局样式，很容易和其他组件的样式冲突，后期维护起来头疼。

内容的提问来源于stack exchange，提问作者Vinay Sharma