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 ?

i suggest you read what does the emulated value in the docs, so that you understand better none (styles will not be limited to the component with none) — Kaddath
– Kaddath, Commented May 15, 2018 at 9:32

user4676340 · Accepted Answer · 2018-05-15 09:31:17Z

6

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.

answered May 15, 2018 at 9:31

user4676340

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Pol Over a year ago

Makes sense ! Thanks a lot :)

Arun Raj R · Accepted Answer · 2018-05-15 10:04:23Z

3

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.

answered May 15, 2018 at 10:04

Arun Raj R

2,3173 gold badges16 silver badges23 bronze badges

Comments

Abin Thaha Azees · Accepted Answer · 2018-05-15 09:27:41Z

-1

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;
}

answered May 15, 2018 at 9:27

Abin Thaha Azees

4,7733 gold badges16 silver badges44 bronze badges

1 Comment

user4676340 Over a year ago

So basically, you see that he removes the built-in encapsulation, and you offer him to do a manual one ? That's a bit counter productive ...

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related