如何停止在 Angular 的模拟封装内应用到全局范围的 CSS 继承？答案

【问题标题】：How to stop inheritance of CSS applied to global scope inside Angular's Emulated Encapsulation?如何停止在 Angular 的模拟封装内应用到全局范围的 CSS 继承？
【发布时间】：2020-09-25 01:43:06
【问题描述】：

我们在 ASP.NET MVC 视图中有一个 Angular 应用程序，所以在.cshtml 里面我们有这个：

<app-root></app-root>

应用到整个 ASP.NET 应用程序的样式与 Angular 组件发生冲突。请注意，原生ShadowDom 封装对我来说不是一个选项，因为它对浏览器的支持有限。

我通过将样式应用于每个组件（模拟版本）来限制范围，

假设这是我的 ASP.NET 视图，它自己的一组 styles/stylesheets 指定如下，并且 <app-root></app-root> 是我的应用程序包含其他组件的地方，我想停止样式标签中的样式流血在我的app-root。我怎样才能做到这一点？

<body>
    <style>
    body {
        background-color: powderblue;
    }

    h1 {
        color: blue;
    }

    p {
        color: red;
    }
    </style>
    <app-root></app-root>
</body>

【问题讨论】：

标签： css angular asp.net-mvc

【解决方案1】：

您可以不导入全局样式表，也可以覆盖这些全局样式。由于这些规则是全局编写的，因此必须以某种方式覆盖它们。（它们不能被忽略）。

例如。

    body {
        background-color: white;
    }

    h1 {
        color: black;
    }

    p {
        color: black;
    }

【讨论】：

我没有将全局 css 导入到我的应用程序中，它们位于我渲染 angular 模板的页面的头部，因此它们被继承给我的应用程序中的成员，覆盖不会似乎是一个不错的选择，我要查看的元素太多了，也不会被视为最佳实践。
我明白了。不幸的是，除了删除规则或覆盖它们之外，我没有看到任何其他选项。祝你好运。