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选择器为你的规则添加前缀，这将定位主机元素而不是将css泄漏给其他组件（除了子组件）< / p>

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

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

Answer 2

“ / deep /”已被弃用，“ :: ng-deep”是一种方法，但要小心。请仔细阅读下面的官方文档以获取详细信息。

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

Answer 3

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

您需要模仿private static void CallWrapper(Expression<Action> func) { Tracer.log(func); func.Compile().Invoke(); }上的encapsulation媒体资源。虽然Angular默认为'Emulate'。（谢谢大卫，纠正我）。

简而言之，Component允许您的组件使用全局样式，同时保持其本地样式。

Emulated

此外，@Component({ selector: 'app-child-component', template: `<div class="parent-class">Child Component</div>`, encapsulation: ViewEncapsulation.Emulated })旨在将样式从父母传递给孩子。因此，如果您试图让您的孩子元素不采用父母的风格，那么使用它会对您不利。

Answer 4

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

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

如何防止Angular组件样式覆盖转移到其他组件？

4 个答案: