Search code examples
cssangularcollisionencapsulation

Angular: Encapsulation cause a CSS collision

I have a problem with some components. I have 2 different components, both with encapsulation: ViewEncapsulation.None activated. They have in common the class parent. I don't know why, but with encapsulation they share the class between them.

To be more specific:

comp1 have a container with class parent

comp2 have a container with class parent

Without encapsulation, the css is isolated, what is good! But when I add encapsulation the comp1 will have 2 styles, one from itself and one from comp2.

How I could fix this collision between styles?

Solution

  • Just use encapsulation: ViewEncapsulation.Emulated.