：：ng-deep 不适用于嵌套类

Question

我正在尝试覆盖父组件中子组件颜色的样式。我试着做了很多事情，但都没有正确地覆盖孩子的原始样式。

当我只为一个类使用：：ng deep时，它可以使用

:host ::ng-deep class1 {
color: black;
}

但是，当我对嵌套类使用：ng deep时：

:host ::ng-deep class1 .class2 .class3 {
color: black;
} 
// OR
:host ::ng-deep class1 {
class2 {
class3 {
color: black;
}
}
}

它不会覆盖孩子的原始样式。我也试过用！它很重要，而且很有效，但我尽量避免使用它。

Answer 1

删除前面的:host或使用孙中的:host。如果我们想为组件本身的host元素设置样式，我们需要特殊的：host伪类选择器。最好将::ng-deep作为最后手段，并建议在/src中的全局style.css中这样做。在使用:ng-deep之前，请尝试将css移动到全局样式表和/或使用!important。如果在某个子组件中使用:ng-deep，它也会影响其他所有组件(您可能一开始看不到(。还要注意添加点的时间和地点。css类中缺少一些。

简单地覆盖一些内容。

.class1 .class2 .class3 {
color: black !important;
} 

这在普通css中是无效的(目前(，在scs中可以嵌套选择器。

.class1 {
.class2 {
.class3 {
color: black !important;
}
}
}

万不得已。

::ng-deep .class1 .class2 .class3 {
color: black;
} 

Answer 2

我不认为::ng-deep仍然是一个东西，你应该在你的组件中使用ViewEncapsulation.None，以禁用CSS封装：

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-page',
templateUrl: './page.component.html',
styleUrls: ['./page.component.css'],
encapsulation: ViewEncapsulation.None // <-- Add this here
})