在 Primeng 中更改进度条颜色

Question

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

ui-progressbar-value

作为宽度随值变化的Element

但是当在CSS的时候我设置了

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

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

Answer 1

首先在您的进度条中添加您自己独特的 class，如下所示 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>

Answer 3

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

HTML

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

在CSS文件中，这是你必须添加的：

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

Answer 4

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

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

并带有主题属性 CSS

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

在 Primeng 中更改进度条颜色

Change progress bar color in Primeng

css

angular

primeng