代码之家 › 专栏 › 技术社区 › Tanner

如何防止角度零部件样式替代传递到其他零部件?

angular-material material-design css-selectors angular css

7

Tanner · 技术社区 · 7 年前

我有一对角度分量,它们相互之间来回排列。他们都有 mat-form-field 在一个组件中,我覆盖下划线组件的样式,如下所示:

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

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

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

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

4 回复 | 直到 7 年前

1

16

David 7 年前

您的问题是由::ng deep引起的,它将对所有人应用样式。mat输入。加载组件并注入样式后,为页面中的元素添加下划线。

如果确实要保留::ng deep组合符,可以添加:host选择器作为规则的前缀,该选择器将以宿主元素为目标,而不会将css泄漏到其他组件(子组件除外)

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

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

2

Faisal Mushtaq 4 年前

以这种方式设置组件的样式,此样式不会泄漏到子组件。使用::ng deep-in:host,但与下面的操作完全相同。

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

3

1

joshrathke 7 年前

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

您需要模仿 encapsulation 您的 Component . 尽管角度默认为“仿真”。(谢谢大卫纠正我的错误)。

简而言之 Emulated 允许组件使用全局样式,同时保留其本地样式。

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

而且 ::ng-deep 旨在将风格从家长传递给孩子。因此,如果您试图阻止您的子元素采用其父母的样式,那么使用这种样式对您不利。

4

1

Rut Shah 6 年前

“/deep/”已被弃用,“:ng deep”是一种方式,但要小心。有关详细信息,请查阅以下官方文件。

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