Ограничивающий объем стиля для внука от ребенка в Angular 2?

Question

Вот эта структура.

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

Теперь мой родитель имеет основную общую таблицу стилей CSS с бутстрапом и всеми цветовыми палитрами. В моем ребенке я дал другую таблицу стилей с помощью ViewEncapsulation.Emulated для ее охвата. Но мой Великий ребенок берет css родителя, а не ребенка. Хотя, согласно иерархии, ребенок является родителем внука. Что делать, если я хочу, чтобы grand-child принимал стили ребенка, а не родителя.

parent.css

button{ 
background: red none; 
} 

Так каждая кнопка должна быть красного цвета, скажем.

мой ребенок - это консоль администратора. Так что это совершенно новый внешний вид.

child.css

button{ 
background: gray none; 
} 

внучатая child.component.html имеет кнопку. Поэтому я ожидаю, что он будет серым, поскольку он охвачен внутри ребенка. Но он становится красным.

Answer 1

Я думаю, что ваши стили должны работать, как они есть, но при добавлении :host может быть стоит попробовать:

:host button { 
    background: red none; 
} 

:host button { 
    background: gray none; 
}