風格ng-bootstrap手風琴與CSS

Question

我有一個帶手風琴的Angular 2組件，我使用ng-bootstrap添加了它。 一切都在功能上運行良好，但是我嘗試使用編譯的折疊元素具有的.card, .card-header, .card-block類.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