更改Primeng中的进度条颜色

Question

我们如何改变Primeng中的进度条颜色。在进度条文档中，它列出了

ui-progressbar-value

作为宽度根据值变化的元素。

但是当我在CSS中设置时

.ui-progressbar-value {
  background-color: #ef5439;
}

它不会改变任何东西。事实上我没有看到任何颜色。 任何帮助将不胜感激。

Answer 1

首先在进度栏中添加您自己的独特课程，如下所示 class="customProgress"，然后尝试在您的 scss 或 css 文件中覆盖它。 希望能有效果

<p-progressBar class="customProgress" [value]="value"></p-progressBar>



.customProgress .ui-progressbar .ui-progressbar-label {
    color: yellow;
}

.customProgress .ui-progressbar .ui-progressbar-value {
    background: red;
}

Answer 2

我通过以下配置实现了结果：

HTML

<p-progressBar [value]="progressValue"
               [ngClass]="'customProgress'">
</p-progressBar>

在 CSS 文件中，您必须添加以下内容：

::ng-deep .customProgress .ui-progressbar .ui-progressbar-value {
    background: #ef5439;
}

Answer 3

上述解决方案不适用于primeng 11。我通过这种方式达到了结果

 `<p-progressBar [value]="progressValue" class="customProgress"></p-progressBar> `

以及主题属性CSS

::ng-deep .customProgress .p-progressbar-label {
  background: #ef5439;
  color: #fff;
} 

Answer 4

在 Angular Prime ng 组件中使用以下样式方法来更改进度条颜色

<p-progressBar [style]="{'background':'red'}"></p-progressBar>

Answer 5

并且有一个 100% 的绿色进度条：

<p-progressBar [value]="rate" 
class="customProgress" 
[ngClass]="{'customProgressGreen': rate == 100}"
></p-progressBar>

使用 CSS 代码：

.customProgressGreen .ui-progressbar .ui-progressbar-value {
    background: green;
}