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

Question

我使用amg-snazzy-window

中的agm-snazzy-window

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

地图component.html

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

我希望有更广泛的内容，所以我做了这个： 地图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指示角度查找“更深”以找到正确的组件agm-snazzy-info-window。