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

Question

我从amg-snazzy-window使用agm -snazzy-window

有一种解释，我可以覆盖css类，但是当我这样做时它将无法工作。 这是我的示例：

map-component.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查找“ deeper”以找到正确的组件agm-snazzy-info-window 。