ProgressBar's CSS seems to conflict with MeterGroup's CSS

[Tubbbe]

Describe the bug

Hello,

I waited for the release of 10.6.4 to play with MeterGroup (https://github.com/primefaces/primereact/issues/6340)

However, I spent a long time before understanding why I had no color: when I have a ProgressBar on my screen, MeterGroup's CSS no longer works.

And even with two ProgressBars and a MeterGroup, when I delete one ProgressBar, the CSS for the other ProgressBar no longer works.

With the example given, you can try deleting one ProgressBar, then the other, then putting one back, then the other, and see how this affects the CSS.

Reproducer

https://stackblitz.com/edit/vitejs-vite-kxawqj?file=src%2FApp.tsx

PrimeReact version

10.6.4

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Firefox 125.0.3 ; Brave 1.65.123

Steps to reproduce the behavior

1. Add a MeterGroup : <MeterGroup values={[{ label: 'Hey', value: 15, color: 'red' }]}></MeterGroup>
2. Add a ProgressBar : <ProgressBar value={33} color={'yellow'} />color={'red'} />` : the MeterGroup is working, but the ProgressBar's CSS is broken
3. Add a second ProgressBar : <ProgressBar value={66} color={'red'} /> : both ProgressBar are working, but the MeterGroup's CSS is broken

Expected behavior

CSS for all components must work

[melloware]

Thanks for the report I submitted a fix!