Problem:
I have an Angular application with standalone components. In my styles.scss I have imported the PrimeFlex css library. I am now trying to add Nuvo - a data import tool, and it appears that some of the css class names in that library overlap with the ones from PrimeFlex which causes Nuvo to look not as expected.
Closest thing to a solution:
1). So far the only thing which does just what I want is using @scope when importing primeflex:
@scope (body) to (nuvo-importer, #nuvo-root-modal-element) {
@import 'primeflex/primeflex.scss';
}
Unfortunately, @scope is not yet supported on Firefox...
2). The only other working solution I have is adding a prefix to all primeflex classes before the import:
$prefix: pf-;
@import 'primeflex/primeflex.scss';
But with this I have to refactor all of my components and it becomes more confusing when using PrimeNG classes such as p-overlay-badge for instance:
<div class="p-overlay-badge pf-w-min">
Now one prime class has the extra prefix and the other doesn't which is clear enough to me but might not be clear to the other devs which will be working on this :D
What did not work for me:
1). I have also tried changing the view encapsulation of the component wrapping <nuvo-importer> but then <nuvo-importer> is no longer visible.
2). I tried adding <nuvo-importer> into a buildable library with its own styles but it was still inheriting the styles from the main app.
3). Using something like this did not help either:
body:not([nuvo-importer] > *) {
@import 'primeflex/primeflex.scss';
}
Question: So... do you know any other ways to make sure that a component from an external library would not get affected by my global styles?