ng-bootstrap 手风琴风格 css

Question

我有一个带有手风琴的 Angular 2 组件，我使用 ng-bootstrap 添加了它。在功能上一切正常，但是我尝试使用编译的手风琴元素具有的 .card, .card-header, .card-block 类加载的样式，这些样式根本不会应用于元素。

这些类直接由ng-bootstrap设置，在将手风琴转换成div的时候。

我通过 styles.scss 文件将我自己的 css 应用到组件 TypeScript 文件。呈现所有内容后，我的样式出现在 html 输出的 header 中的 <style></style> 标记中。看起来像这样。

    <style>
        [_nghost-xfh-23]   .card[_ngcontent-xfh-23] {
          border: none; }

    [_nghost-xfh-23]   .card-header[_ngcontent-xfh-23] {
      margin-top: 0.75em !important;
      border: 1px solid rgba(0, 0, 0, 0.125); }

    [_nghost-xfh-23]   .card-block[_ngcontent-xfh-23] {
      text-align: left; }
    </style>

styles.scss 看起来像这样：

:host .card {
  border: none;
}

:host .card-header {
  margin-top: 0.75em !important;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

:host .card-block {
  text-align: left;

}

我的猜测是 Angular 2 正在尝试应用样式（在编译过程中），但后来创建了带有所述类的 div，因此无法将样式应用于元素。

我无法直接编辑 bootstrap.css 或创建其他全局 css 文件。我希望有一种方法可以在组件加载后重新应用 css 样式，或者可以通过其他方式来设置 ng-bootstrap 手风琴的样式。

希望我的问题有意义，问候赛

Answer 1

正如@ChristopherMoore 在他的评论中所说，这是由于 Shadow DOM 造成的问题。添加 /deep/ 修复了它。这里是更新后的功能代码。

  /deep/ .card {
  border: none;
}

/deep/ .card-header {
  margin-top: 0.75em !important;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

/deep/ .card-block {
  text-align: left

ng-bootstrap 手风琴风格 css

Style ng-bootstrap accordion with css

css

ng-bootstrap

angular