Angular 4+覆盖子组件的样式 [英] Angular 4+ overwrite child component's style

问题描述

我想强制父组件在没有！important修饰符的情况下更改子组件的样式.我的问题是..有什么办法吗? (我是初学者，可能不是最好的解决方案.)

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.)

这里是有关2个伴奏的一个最小示例.子级模板中有一个简单的div:)

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

parent.component.scss:

parent.component.scss:

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

childe.component.scss:

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! :)

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

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

推荐答案

添加到全局样式表

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

您还必须关闭子组件的 viewencapsulation .我已经创建了一个 stackblitz 进行演示.

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.

这篇关于Angular 4+覆盖子组件的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！