Question

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

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

我通过一个链接到组件TypeScript文件的styles.scss文件来应用我自己的css。渲染完所有内容后，我的样式会显示在html输出标题中的<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手风琴的样式。

希望我的问题有道理，问候 SY

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

1 个答案: