Angular : CSS of one component is conflicting with another Component.

Question

My project Hierarchy is as below:

Component_HomePage
   |
   |---> Component_Tool1
   |        |
   |        ---> Component_Inner_01
   |
   |---> Component_Tool2
            |
            ---> Component_Inner_02

Obviously all Component are having different styling.

Though there are some CSS classes in Component_Inner_01 & Component_Inner_02 whose names are same but content is different.

For example:

Component_Inner_01.CSS having list-group-item class

.list-group-item{
    padding: 0px;
}

And Component_Inner_02.CSS is also having list-group-item but content is diff.

.list-group-item{
    padding: 10px;
}

So for the first time when i browse Component_Inner_01 list-group-item takes padding as 0px, which is perfect.

But when i view Component_Inner_01 page after viewing Component_Inner_02 page, list-group-item class of Component_Inner_01 is taking padding as 10px.

I figured out the issue was in Component_Inner_02

Component_Inner_02's decorator having metadata encapsulation which is set to ViewEncapsulation.None

But i don't know what making CSS classes conflict with each other when having encapsulation: ViewEncapsulation.None , Can anybody explain ?

Answer 1

View encapsulation means that your view is encapsulated : it means Angular adds random attributes to your tags to distinct them from one to another.

If you use encapsulation: ViewEncapsulation.None , then your view isn't encapsulated anymore : styles don't have random attributes, and start conflicting.

If you want to stop that, remove that line from your component.

the CLI provides a global style sheet called style.[extension] where you can put all global styles. You don't need to deactivate encapsulation.

Answer 2

Instead of removing the line as #trichetriche said use the necessary encapsulation mechanism.

FYI

ViewEncapsulation.Emulated : Any styles we define on a component don't leak out to the rest of the application. But, the component still inherits global styles like twitter bootstrap .

ViewEncapsulation.Native : Styles we set on a component do not leak outside of the components scope. Component is also isolated from the global styles we've defined for our application.

ViewEncapsulation.None : We are not encapsulating anything, the style we defined in our component has leaked out and started affecting the other components.

Answer 3

You can make a wrapper element and give it an Id, use that ID to give styles for that particular component. And same for the second component also. So that the styles won't make conflict one after another.

<div id="component1">
    //Component1 code here
</div>

<div id="component2">
    //Component2 code here
</div>

Styles

#component1 .list-group-item {
    padding: 0px;
}

#component2 .list-group-item {
    padding: 10px;
}