在angular 2和bootstrap 4中使用自定义颜色实现进度条

Posted 2023-03-21

【中文标题】在angular 2和bootstrap 4中使用自定义颜色实现进度条

【英文标题】：Implementing progress bar with custom color in angular 2 and bootstrap 4

【发布时间】：2017-02-04 11:11:56

【问题描述】：

我正在尝试使用 ng-bootstrap 组件实现引导进度条。该文档使用指令“type”提供了 4 种着色类型，该指令只能是 4 种之一：“success”、“info”、“warning”或“danger”。 (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;

关于如何更改该颜色的任何建议？

【参考方案1】：

Bootstrap 4 不会根据预定义的变量更改进度条。 $progress-bar-color 变量是硬编码的，导致了问题。

现已修复。