Angular 4+覆盖子组件的样式

Question

我想强制父comp在不使用！important修饰符的情况下更改子comp的样式。我的问题是..有没有办法做到这一点？ （我初学者角度可能不是最佳解决方案。）

这是关于2个comps的最小例子。 Child在模板中有一个简单的div：）

parent.component.scss：

::ng-deep .child-div{
    background-color: red;
}

childe.component.scss：

.child-div{
    width: 100rem;
    height: 100rem;
    background-color: $pink;
    color: $blue;
    line-height: 100rem;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

感谢您的时间和答案！ ：）

编辑＃1 --- 我从全局style.scss

尝试了它

Answer 1

添加到您的全局样式表

app-root app-child .child-div {
   background-color: red;
}

您还必须关闭子组件的viewencapsulation。我已经为演示创建了stackblitz。

请记住，在这种情况下，您将始终覆盖子项样式，因为app-component将始终是任何子组件的父项。