Angular - 具有原生视图封装和全局 CSS 规则的组件答案

【问题标题】：Angular - Component with Native View Encapsulation and Global CSS rulesAngular - 具有原生视图封装和全局 CSS 规则的组件
【发布时间】：2023-03-22 00:59:01
【问题描述】：

我有一个带有原生视图封装的组件

这意味着每个 CSS 规则都使用影子 DOM 将我的规则仅应用于当前组件。但是我有一个组件，每次使用它时，我都想设置标签样式。如何将原生视图封装与全局 CSS 规则结合起来？

【问题讨论】：

你能澄清你的问题吗？你想避免使用encapsulation: ViewEncapsulation.None 并且仍然能够使用全局样式设置组件的样式吗？
没错！这就是我想要的
您可以将规则放在根styles.css 文件中。我个人使用scss @includes。编写一次并在任何地方导入。

标签： angular angular-components

【解决方案1】：

您将全局样式表添加到组件中的 styleUrls 值，以便在这些情况下允许它，如下所示：

styleUrls: ['./products.component.css', '../app.component.css'],

【讨论】：