css - 将 CSS 从 Angular 组件应用到子组件

Question

我们有一个内部的 Angular 组件库(一个元素)，每个组件都有基本的样式。

我们在我们的应用程序(另一个元素)中使用这个库。

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

从 App 中的全局 styles.scss，我可以很好地定位库组件中的元素。

如果我将该全局 CSS 移动到 App 组件 CSS 文件中，尝试可能的方法，我将无法定位库组件内的任何元素。

应用组件.html

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

library-component.html

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

应用组件.scss

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

样式.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;
}