*ng-deep不适用于嵌套类

Question

我试图在父组件中覆盖子组件颜色的样式。我试着做了很多事情，但没有一件是正确地覆盖了孩子最初的造型。

当我只对一个类使用：：ng-深度时，它就能工作了。

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

但是，当我在嵌套类中使用：：ng-深度时：

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

它不会覆盖孩子的原始造型。我也试过使用！重要而有效，但我试图避免使用。

Answer 1

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

只是简单地覆盖了一些东西。

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

这在普通css (尚未)中是无效的，在scss中您可以嵌套选择器。

.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
})