Question

我们有一个内部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中时，背景才会变为绿色。

这怎么会失败？

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

Answer 1

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

Here is working example

使用

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

Answer 2

您正在体验的是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会将您的样式“泄漏” 到其他组件，这很重要，这将使您难以对应用程序进行样式设置，除非您确切知道样式的位置被定义。

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

2 个答案: