在角度2和引导中使用自定义颜色实现进度条4

Question

我试图使用ng-bootstrap组件实现引导进度条。该文档使用指令“type”提供了4种着色，它们只能是“成功”，“信息”，“警告”或“危险”之一。 （https://ng-bootstrap.github.io/#/components/progressbar）

我确保所有颜色都在我的变量sass文件夹中自定义，以覆盖bootstrap的默认变量。

然而，当使用小学时，酒吧出现在蓝色。

进度条代码：

<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 combinator >>>（别名/deep/）。也看看这篇文章：基于预定义的

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

Plunker Example

Answer 2

引导4不会改变进度条：

The HTML5 progress Element

这样，你的解决方案可能看起来像变量。 $ progress-bar-color变量被硬编码并导致麻烦。

现在已经修复。