风格ng-bootstrap手风琴与CSS

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

当将手风琴转换为div时,这些类由ng-bootstrap直接设置.

我通过一个链接到组件TypeScript文件的styles.scss文件来应用我自己的css.当所有内容都呈现时,我的样式会出现在html输出标题中的标记中.看起来像这样.

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手风琴的样式.

希望我的问题有道理,对Sy说

正如@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