角度2とブートストラップ4にカスタムカラーのプログレスバーを実装

Question

ng-bootstrapコンポーネントを使用してブートストラッププログレスバーを実装しようとしています。ドキュメントには、 "success"、 "info"、 "warning"、または "danger"の4つのうちの1つしかない指示 "type"を使用した4種類の色分けがあります。 （https://ng-bootstrap.github.io/#/components/progressbar）

私はすべての色が自分の変数のsassフォルダでカスタマイズされていることを確認して、ブートストラップのデフォルト変数を上書きしました。

ただし、プライマリを使用している場合、バーは青色で表示されています。

プログレスバーコード：

<ngb-progressbar type="primary" [value]="25"></ngb-progressbar> 

CSS試験：その色を変更する方法については

//Doesn't work - no effect what so ever - this style is placed in a global stylesheet in order to have access to the progress bar. 
.progress.progress-primary{ 
    background-color: yellow; 
} 

任意の提案ですか？

Answer 1

progressはhtml5タグです。シャドウピアスCSSコンビネータ>>>（エイリアス/deep/）を使用してください。また、この記事を見てみましょう：

The HTML5 progress Element

あなたのソリューションは、次のようになりますこの方法：

ブートストラップ4が事前定義に基づいて、プログレスバーを変更しない

ngb-progressbar >>> .progress.progress-primary::-webkit-progress-value { 
    background: yellow; 
} 

Plunker Example

Answer 2

を変数。 $ progress-bar-color変数はハードコードされており、問題を引き起こしていました。

修正されました。