在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

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

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