Parth Chokshi Parth Chokshi - 1 month ago 8
CSS Question

Restricting scope of Style to grand-child from child in Angular 2?

Here is the structure.

<parent>
<child>
<grand-child>
........
</grand-child>
</child>
</parent>


Now, my parent has main global css stylesheet with bootstrap and all color-palettes. In my child, I gave another stylesheet with ViewEncapsulation.Emulated to scope it. But my Grand child takes css of parent and not child. Even though, according to hierarchy child is grand-child's parent. What to do if I want grand-child to take the styles of child and not parent.

parent.css

button{
background: red none;
}


So every button should be red let's say.

my child is the admin-console. So its a whole new look and feel.

child.css

button{
background: gray none;
}


grand-child.component.html has a button. So I expect it would be gray as it is scoped inside child. But it becomes red.

Answer

I think your styles should work as they are but adding :host might be worth a try:

:host button {
  background: red none;
}
:host button {
  background: gray none;
}
Comments