ng-deep正在影响同级组件

Question

我在使用Angular Material Design时遇到了一个问题，我需要使用ng-deep来调整手风琴的样式。然而，我在其他地方使用手风琴，它的风格也是一样的。这不是我们想要的。

它应该这样做吗？我该如何修复它？

Answer 1

ng-deep已被弃用，并且正在从主要浏览器中删除对它的支持。您可以在Angular Docs中阅读有关它的更多信息。

我建议您从组件中删除视图封装(None删除了该组件的样式封装，以便您可以针对角度材质样式)。

import { ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-example-component',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Answer 2

我发现为了将样式限制到组件，我必须用:host封装::ng-deep代码，如下所示：

:host {
    ::ng-deep {
        /* ... custom styles here */
    }
}