将Angular组件中的CSS应用于子组件

时间:2019-05-28 11:34:08

标签: css angular

我们有一个内部Angular组件库(一个项目),每个组件都有基本样式。

我们在应用程序(另一个项目)中使用此库。

应用程序中的组件包含我们库中的组件。

从App的global styles.scss中,我可以将库组件中的元素作为目标。

如果我将全局CSS移到App组件CSS文件中,请尝试尝试执行什么操作,但我无法定位库组件中的任何元素。

app-component.html

<div class="outter">
  <library-component specificityattr></library-component>
</div>

library-component.html

<div class="generic-styles">
  <p class="hello">Hello</p>
</div>

app-component.scss

library-component[specificityattr] p.hello {
    background: red;
}

styles.scss

library-component[specificityattr] p.hello {
    background: green;
}

在styles.scss中没有选择器时,我希望P标签具有红色背景。 只有在将相同的选择器放入styles.scss中时,背景才会变为绿色。

这怎么会失败?

设置组件子组件样式的正确方法是什么?

2 个答案:

答案 0 :(得分:0)

您的:host组件是library-component,并且您想将CSS应用于某些“深度” DOMS,因此它意味着:ng-deep

Here is working example

使用

:host library-component[specificityattr] ::ng-deep p.hello {
    background: green;
}

答案 1 :(得分:0)

您正在体验的是Angular中组件默认ViewEncapsulation的影响。

当您定义一个如下所示的组件时,该组件的视图封装将是默认值,我已将其包含在注释中。这意味着Angular不会为您的组件创建一个所谓的“阴影DOM”,并且所有样式都只会应用于您的组件。

封装的组件

@Component({
    selector: 'my-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    //encapsulation: ViewEncapsulation.Emulated
})

如果您想不仅将样式应用于您的组件,则可以在组件声明中指定特定的ViewEncapsulation。使用ViewEncapsulation.None会将样式移到DOM头,并且仍然不会创建阴影DOM。

无封装

@Component({
    selector: 'my-component',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})

看看this StackBlitz example

请记住,ViewEncapsulation.None会将您的样式“泄漏” 到其他组件,这很重要,这将使您难以对应用程序进行样式设置,除非您确切知道样式的位置被定义。