如何防止Angular组件样式替代覆盖到其他组件？

Question

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

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

当我单击链接返回到其他组件时，如上定义的样式会保留下来，下划线组件也消失了。我试图添加如下样式：

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

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

Answer 1

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

如果您确实想保留:: ng-deep组合器，则可以添加：host选择器以为您的规则添加前缀，该规则将以host元素为目标，而不会将css泄漏给其他组件（子组件除外）

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