cssangularangular2viewencapsulation

How to stop css bleeding in angular 11.2

I am working on a angular 11.2 project and I see that CSS of a component is getting applied to another component which has the same css selector name. How can I stop this? please help

Solution

  • My solution was to use ViewEncapsulation.None but to use targeted css. ie using specificity. for example if i had a component structure as below:

    <div class="parent">
  <div class="child">
    <span></span>
  </div>
</div>

    My css would be :

    .parent .child > span { ...some css here}

    The reason not to use Emulated is that, some lib components can't be targeted with "None" as ViewEncapsulation. hence we need to set it to None and then follow this approach.