gpt4 book ai didi

css - 无法使用 Angular 将样式应用于组件 css 中的 svg,仅在全局 css 文件中

转载 作者:行者123 更新时间:2023-11-28 14:31:05 26 4
gpt4 key购买 nike

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

因为我处理“svg”、“polygon”、“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;
}

最佳答案

请参阅此 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?但它有效。

关于css - 无法使用 Angular 将样式应用于组件 css 中的 svg,仅在全局 css 文件中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54169415/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com