Angular 4+覆盖子组件的样式

Question

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

这是一个关于 2 个组合的最小示例。 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 用于演示。

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