如何防止 Angular 组件样式覆盖传递到其他组件？答案

【问题标题】：How do I prevent Angular component styling override from carrying over to other components?如何防止 Angular 组件样式覆盖传递到其他组件？
【发布时间】：2018-07-27 19:24:15
【问题描述】：

我有几个 Angular 组件来回路由。他们都有mat-form-field。在一个组件中，我将覆盖下划线组件的样式，如下所示：

::ng-deep .mat-input-underline {
  display: none;
}

当我单击链接返回到另一个组件时，上面定义的样式将继续存在，并且下划线组件消失了。我尝试添加如下样式：

::ng-deep .mat-input-underline {
  display: revert;
  //or
  display: unset;
  //or
  display: initial;
}

但它们都不起作用。如何仅在一个组件上覆盖材料设计样式而不在其他组件上覆盖？

【问题讨论】：

这可能是由::ng-deep 引起的。这就是它应该做的。我认为您应该提供一个更完整的示例并正确解释预期结果应该与实际结果有何不同。
@Tanner 你研究过封装吗？ stackoverflow.com/questions/48816419/…
改为内联样式
尽可能使用最具体的选择器。
@Tanner 你找到方法了吗？此问题中给出的选项均无效

标签： css angular css-selectors material-design angular-material

【解决方案1】：

我假设您正在使用 Angular Cli 生成组件...

您需要在您的Component 上模拟encapsulation 属性。尽管 Angular 默认为“模拟”。（感谢大卫，纠正我）。

简而言之，Emulated 允许您的组件使用全局样式，同时将其本地样式保留给自己。

@Component({
  selector: 'app-child-component',
  template: `<div class="parent-class">Child Component</div>`,
  encapsulation: ViewEncapsulation.Emulated
})

另外，::ng-deep 旨在将样式从父母传递给孩子。因此，如果您试图阻止您的子元素采用其父元素的样式，那么使用它对您不利。

【讨论】：

ViewEncapsulation 默认设置为模拟：angular.io/api/core/ViewEncapsulation
您的权利，很抱歉造成混乱。我正在混淆我最近遇到的一个单独的问题。我删除了不正确的信息。不管怎样，它不会改变我的答案，但我假设你仍然有这个问题。
那么谁能解决这个问题。我正在尝试应用这种全局样式： .mat-form-field-infix{ padding: 0.5em 0 0.5em 0 !important;并在我的组件 css 中将其更改为 0.2em 填充，但是当加载该组件时，样式将应用于所有组件

【解决方案2】：

您的问题是由 ::ng-deep 引起的，一旦加载了组件并注入了样式，它将对页面中的所有 .mat-input.underline 元素应用样式。

如果你真的想保留 ::ng-deep 组合器，你可以添加 :host 选择器来为你的规则添加前缀，这将针对主机元素而不会将 css 泄漏到其他组件（子组件除外）

:host ::ng-deep .mat-input-underline
{
  display: none;
}

https://angular.io/guide/component-styles#host

【讨论】：

这不起作用。我认为 OP 和我想要的是一种更改全局样式的方法，但是当您在特定组件中时会发生这种更改

【解决方案3】：

"/deep/" 已弃用，"::ng-deep" 是这样，但要小心。详细信息请浏览以下官方文档。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【讨论】：

【解决方案4】：

以这种方式为您的组件设置样式，此样式不会泄漏到子组件。在 :host 中使用 ::ng-deep 但就像我在下面所做的一样。

:host {
        ::ng-deep p, .py-8 {
            margin: 0 !important;
        }
    }

【讨论】：