MdProgressBarバッファのバックグラウンドカラーを角度のある材質で表示

Question

角度の材質からprogress barを使用してカスタムスタイルを設定しようとしています。要素自体のスタイリング（例：md-progress-bar { border: 1px solid black }）だけで、進行部分の境界、放射、色を設定できますが、バーの背景色を追加することはできません。 私は.mat-progress-bar-bufferのバックグラウンドカラーをdevツールを使って変更しても動作しますが、コンポーネントcss（またはその他のcss）ではなくても機能します。

ので、これは動作しません：

.mat-progress-bar-buffer { 
    background-color: $white; 
} 

私は他に何を試すことができますか？

編集：hereさんと遊ぶシンプルなプランカ。

Answer 1

/deep /と>>>はブラウザのサポートから廃止される予定であるため、これ以上改善するかどうかはわかりません。::ng-deepを使用してこれをエミュレートする独自の方法があります。

Documentation on angularは、近い将来に::ng-deepを削除する予定がないと言いますが、github vicbには非難されるとのことです。

使い方は/deep/次のようになります

みました

::ng-deep .mat-progress-bar-buffer {}

Answer 2

これは、ViewEncapsulationによるものです。 /deep/ .mat-progress-bar-bufferを追加すると、スタイルが適用されます。

私はまだもっと良い解決策を探していたいと思います。