Angular 4+ overwrite child component's style

问题:

I want to force parent comp to change child comp's style without the !important modifier. My question is.. is there any way to do that? (I am beginner to angular may not the best solution.)

Here is a minimal example about the 2 comps. Child has a simple div in template :)

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;
}

Thanks for your time and answers! :)

Edit #1 --- I tried it from the global style.scss

回答1:

Add to your global stylesheet

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

You also have to turn off the viewencapsulation of the child component. I've created a stackblitz for demonstration.

Keep in mind in this case you will always override the childs style because the app-component will always be a parent of any child component.