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

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

本文介绍了如何防止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组件样式替代覆盖到其他组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 06:26