Question

我有一个“ Sidenav”组件，在其中使用svg作为菜单图标，但无法从组件scss文件中的样式应用于这些图标，它仅在全局scss文件中起作用。

由于我处理的是“ svg”，“多边形”，“ path” ..标签，因此在组件scss文件中不起作用。

由于仅在组件中使用了这些svg，有没有办法使它工作？

代码示例：

<div id="sidenav-icon-section">
      <li class="bleu-icon">
          <a href="/">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" data-inject-url="http://localhost:4200/assets/images/menu_items/accueil.svg" _ngcontent-c1="">
                <polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="32,3 2,33 11,33 11,63 23,63 23,47 39,47   39,63 51,63 51,33 62,33 "></polygon>
                </svg>
            </a> 
        </li>
    </div>

此CSS代码将在我的全局scss文件中运行，但在我的组件css文件中无效：

#sidenav-icon-section {

  .bleu-icon polygon {
    transition: .2s !important;
  }

  &:hover .bleu-icon polygon {
    stroke: #009999 !important;
  }
}

甚至任何类似的CSS属性：

svg {
dislay: none;
}

Answer 1

在组件装饰器中使用encapsulation: ViewEncapsulation.None：

@Component({
  selector: '...',
  template: `...`,
  encapsulation: ViewEncapsulation.None
  ...
})

这会将组件的样式放置在页面的head标记中。

Answer 2

请参阅此SO帖子： Angular 2 - innerHTML styling

这建议在CSS选择器之前添加

:host ::ng-deep.

即

 :host ::ng-deep .bleu-icon polygon {
    transition: .2s !important;
  }

链接的SO帖子表明::ng-deep有点破解（支持上面mwilson的评论），并且::ng-deep被标记为折旧。但是，我还没有看到一种建议的替代方案，只是需要大量讨论。

另一种解决方案是在javascript中添加样式。我同意这同样令人尴尬，因为那为什么为什么要使用SASS？但这有效。

无法将样式应用于具有Angular的组件css中的svg，仅在全局css文件中

2 个答案: