使 Angular 组件样式表与子组件一起工作答案

【问题标题】：Make Angular component stylesheet work with sub-components使 Angular 组件样式表与子组件一起工作
【发布时间】：2021-12-22 05:25:41
【问题描述】：

我对 Angular 比较陌生，我对组件样式表有疑问。

我有一个 Angular 12 应用程序并创建了一个名为 my-component 的组件。有问题的组件的模板是这样的：

my-component.html

<div>
  ...some html...
  <some-other-angular-component></some-other-angular-component>
  ...some other html...
</div>

some-other-angular-component 是另一个组件，来自应用程序本身或第三方库。

现在，我想要在my-component 中做的是对some-other-angular-component 的内容应用一些CSS 规则。我知道它生成的 HTML 包含我可以定位的类，所以我尝试将它添加到我的组件 CSS：

my-component.scss

.some-other-angular-component-inner-class {
  background-color: red;
}

但是，这不起作用，似乎组件的 CSS 文件只将规则应用于组件模板中直接定义的 HTML，而不是子组件生成的 HTML。

有没有办法让这个工作？我发现自己必须将我的 CSS 添加到 webapp 的主 style.scss 文件中，即使我只想将规则应用于 my-component 内的特定 some-other-angular-component 实例。它使样式混乱和不必要的碎片化。这是故意的，还是我错过了什么？

【问题讨论】：

标签： css angular sass angular12

【解决方案1】：

我想你可能想看看View Encapsulation。

@Component({
  selector: 'app-no-encapsulation',
  template: `
    <h2>None</h2>
    <div class="none-message">No encapsulation</div>
  `,
  styles: ['h2, .none-message { color: red; }'],
  encapsulation: ViewEncapsulation.None,
})
export class NoEncapsulationComponent { }

如果样式规则匹配，这些样式将被添加到 head 并且将适用于其他组件。

请注意，您仅只为此组件启用此行为。 CSS 规则重叠的可能性仍然存在，但与直接将样式放入 style.css 相比要少得多。

我还建议您在标记中添加.class 或#id 属性，以确保您的规则默认不会重叠。

例如：

.my-component .rule-one {
}

它将确保我的规则仅适用于应用了此类的组件。

【讨论】：

谢谢，原来如此！