CSSを使ったng-bootstrapアコーディオン

Question

私はng-bootstrapを使って追加したアコーディオン付きの角2コンポーネントを持っています。機能はすべて正常に機能しますが、コンパイルされたアコーディオン要素にあるクラス.card, .card-header, .card-blockを使用してロードしようとするスタイルは、そのスタイルが要素にまったく適用されません。

これらのクラスは、アコーディオンをdivに変換するときにng-bootstrapによって直接設定されます。

私はコンポーネントのTypeScriptファイルにリンクするstyles.scssファイルを使用して自分のCSSを適用します。すべてがレンダリングされると、私のスタイルはhtml出力のヘッダーにある<style></style>タグに現れます。 このように見えます。

: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; 

} 

私の推測では、角2は、（コンパイル時に）スタイルを適用しようとしているということですが、作り、その後言ったクラスとのdivのを作成します。

<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は次のようになります要素にスタイルを適用することは不可能です。

Imは、bootstrap.cssを直接編集したり、他のグローバルなCSSファイルを作成したりすることができません。私は、コンポーネントがロードされた後にCSSスタイルを再適用する方法や、ng-bootstrapアコーディオンをスタイルする他の手段があることを期待しています。

は私の問題は、理にかなってホープ、 よろしく Syの

Answer 1

@ChristopherMooreが彼のコメントで言ったように、それが原因シャドウ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