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

问题描述

我有几个相互之间来回路由的Angular组件.它们都有mat-form-field.在一个组件中，我将覆盖下划线组件的样式，如下所示:

I have a couple Angular components that route back and forth to one another. They both have mat-form-field's. In one component, I am overriding the styling of the underline component like so:

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

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

When I click on the link to go back to the other component, the styling as defined as above carries over and the underline components are gone. I tried to add styling like:

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

但是它们都不起作用.我该如何仅在一个组件上覆盖材质设计样式，而不能在其他组件上覆盖呢?

But none of them work. How can I override the material design styling on just one component but not the others?

推荐答案

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

Your issue is caused by ::ng-deep, which will apply style to all .mat-input.underline elements in the page once the component has been loaded and style injected.

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

If you really want to keep the ::ng-deep combinator, you can add the :host selector to prefix your rule, which will target the host element and not leak the css to other components (apart from child components)

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

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

这篇关于如何防止Angular组件样式替代覆盖到其他组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！