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

Question

我使用来自amg-snazzy-window的agm-snazzy-window

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

地图组件.html

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

我想拥有更广泛的内容，所以我做了这个： 地图组件.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。