将 Angular 中的 child 的样式范围限制为 grand-child 2？

Question

这是结构。

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

现在，我的 parent 有主要的全局 css 样式表 bootstrap 和所有 color-palettes。在我的 child 中，我给出了另一个带有 ViewEncapsulation.Emulated 的样式表来确定它的范围。但是我的 Grand child 占了 parent 的 css 而不是 child。尽管，根据层次结构 child 是 grand-child 的 parent。如果我希望 grand-child 采用 child 而不是 parent 的样式，该怎么办。

parent.css

button{
background: red none;
}

假设每个按钮都应该是红色的。

我的child是admin-console。所以这是一个全新的外观和感觉。

child.css

button{
background: gray none;
}

grand-child.component.html 有一个按钮。所以我预计它会是灰色的，因为它在 child 内。但是变红了

Answer 1

我认为您的样式应该按原样工作，但添加 :host 可能值得一试：

:host button {
  background: red none;
}

:host button {
  background: gray none;
}

将 Angular 中的 child 的样式范围限制为 grand-child 2？

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

css

angular2-template

angular