Using two different versions of PrimeReact causes styles to clash

[cole-consulting]

I am working on a system that contains multiple different react apps as micro applications. One application uses the latest version of PrimeReact (^8.2.0) while the second legacy application uses an older version (^6.4.0). It appears that the styles are clashing between the two different versions of primereact.css files. My long term goal is to combine these two into one project that runs the same version. However, in the meantime, I'm looking for a shortcut to compartmentalize the CSS between the two versions.

Symptoms:
When I build components using the new version, and the old application is not present (I simply delete the files), it looks and works great. When I build the second application and both are present at the same time, those same components do not look the same. Two changes I note are data table grid columns no longer displaying correctly, and the width of overlay panels is now full screen instead of the set width.

Any help would be greatly appreciated! Thanks.

[Melloware]

When you say "micro-applications" they are each separate webapps right? Are you trying to display them inside the same React page?

I am confused because a React App can only display one page at a time and if you are trying to import old PrimeReact CSS and new PrimeREact CSS on the same page then yes you will have a conflict as only 1 will win.

[cole-consulting]

They are two separate React applications, and both are included in the same legacy ASP.NET WebForms application. I use them both as more of a "widgets" library than a full SPA.

[Melloware]

Understood. I think that making the css on the page work for both will be quite difficult the way you have it.

[cole-consulting]

That was my assumption as well. I was hoping there was some trick to help encapsulate the styles. Maybe somebody has a creative solution.