如何编辑从其他模块 Angular 2+ 导入的子组件的 css

Question

我使用amg-snazzy-window 中的 amg-snazzy-window

有解释说我可以覆盖 css 类，但是当我这样做时它不起作用。这是我的例子：

地图组件.html

   <agm-snazzy-info-window [closeWhenOthersOpen]="true">
         <ng-template>
            My snazzy window
         </ng-template>
   </agm-snazzy-info-window>

我想要更广泛的内容，所以我做了这个：map-component.scss：

.si-content {
  width: 500px !important;
}

我究竟做错了什么？

Answer 1

::ng-deep .si-content {
  width: 500px !important;
}

这将告诉 angular 将正确的ViewEncapsulation.Emulated类附加到您的样式中。默认情况下它不会这样做，因为它无法在您的模板中找到它们。

没有::ng-deep，您的风格将是.si-content[_ngcontent-1]，或类似的东西。在这种情况下[_ngcontent-1]来自map-component. 使用::ng-deep您指示 angular 寻找“更深”以找到正确的组件agm-snazzy-info-window。