ng-bootstrap: ngb-progressbar 自定义背景色

Question

我正在尝试设置进度颜色，但我在网上看到的示例不起作用。

我有一个 Angular (v4) 组件使用 ng-bootstrap 的 ngb-progressbar 组件（Bootstrap 4）。

<ngb-progressbar type="primary" [value]="progress">
    <span>{{ progress }} %</span>
</ngb-progressbar>

如何设置此组件进度的背景色样式以在 Chrome、IE 和 FF 中运行？

Answer 1

只需覆盖 class .progress-bar 并在 css

上放置一个 !important

.progress-bar{

background-color:black !important;  

}

Answer 2

看看您是否在作用域组件中执行此操作。这样，ngb-progressbar 就读不懂你的风格了

Answer 3

在您的 css 样式中试试这个插入物

::ng-deep .progress-bar {
  background-color: black !important;
}

ng-bootstrap: ngb-progressbar custom background color