无法将样式应用于svg';s在带有角度的组件css中,仅在全局css文件中
我有一个“Sidenav”组件,其中我使用svg作为菜单图标,但我无法从组件scss文件中将样式应用于这些图标,它只能从全局scss文件中工作 因为我处理的是“svg”、“多边形”、“路径”。。。。标记,它在组件scss文件中不起作用 既然我只在我的组件中使用这些svg,有没有办法让它工作 代码示例:无法将样式应用于svg';s在带有角度的组件css中,仅在全局css文件中,css,angular,svg,Css,Angular,Svg,我有一个“Sidenav”组件,其中我使用svg作为菜单图标,但我无法从组件scss文件中将样式应用于这些图标,它只能从全局scss文件中工作 因为我处理的是“svg”、“多边形”、“路径”。。。。标记,它在组件scss文件中不起作用 既然我只在我的组件中使用这些svg,有没有办法让它工作 代码示例: <div id="sidenav-icon-section"> <li class="bleu-icon"> <a href="/"&
<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属性,如:
svg {
dislay: none;
}
在组件装饰器中使用
封装:视图封装。无
@Component({
selector: '...',
template: `...`,
encapsulation: ViewEncapsulation.None
...
})
这将在页面的标题中放置组件的样式。请参阅以下文章:
这意味着在CSS选择器前面加上
:host ::ng-deep.
i、 e
链接的SO帖子表明::ng deep
有点像黑客(支持mwilson的上述评论),并且::ng deep
标记为折旧。然而,我还没有看到一个提议的替代方案,只是需要进行大量的讨论
另一个解决方案是在javascript中添加样式。我同意这同样令人尴尬,因为那为什么会有无礼呢?但它可以工作。请提供相关代码,最好是一个@ccprog,现在就完成。这应该附带一个精细的打印文本“将不经意地将样式应用于应用程序中任何匹配的选择器,而不是封装在组件中”。我认为这更像是一种黑客行为。有点像使用::ng deep
:host ::ng-deep.
:host ::ng-deep .bleu-icon polygon {
transition: .2s !important;
}