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

问题描述：

我从 amg-snazzy-window href ="https://github.com/atmist/snazzy-info-window#html-structure"a>

有一个解释，我可以覆盖CSS类，但是当我这样做时它将无法正常工作.这是我的示例:

There is explanation that I can override css class but when I do it it won't work. This is my example:

map-component.html

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

我想拥有更多内容，所以我做到了:map-component.scss:

I want to have wider content so I made this: map-component.scss:

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

我在做什么错了?

答

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

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

This will tell angular to attach correct ViewEncapsulation.Emulated classes to your styles. It doesn't do this by default because it cannot find them in your template.

如果没有 :: ng-deep ，您的样式将为 .si-content [_ngcontent-1] 或类似的样式.在这种情况下， [_ ngcontent-1] 来自 map-component .使用 :: ng-deep ，您可以指示angular查找更深"以找到正确的组件 agm-snazzy-info-window .

Without ::ng-deep, your style will be .si-content[_ngcontent-1], or something similar. In such case [_ngcontent-1] comes from the map-component. Using ::ng-deep you instruct angular to look for "deeper" to find correct component agm-snazzy-info-window.

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

相关推荐