Vue JS "scope" 样式不适用于 SVG 内部元素

Question

我有一个包含SVG图标的按钮。当样式表为"时，我无法更改SVG的颜色内部元素；"范围"；

组件代码：

<template>
<a class="my-btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="..." fill="black" fill-opacity="0.54"/>
</svg>
<span>
My Button Label
</span>
</a>
</template>
<style src="@/assets/css/my-custome-button.css"scope></style>

CSS代码(@/assets/CSS/my custome button.CSS(

a.my-btn:hover svg path {  
fill: red !important;
fill-opacity: 1;
}

问题

因为我正在使用"；"范围"；属性，Vue会自动为匹配的元素分配一个属性，并相应地重写CSS。Vue似乎无法访问SVG内部元素。最后的CSS看起来像：

a.my-btn svg path[data-v-64222e86] {  
fill: var(--danger) !important;
fill-opacity: .9;
}

但是输出SVG不包括"0"；data-v-6422e86"；属性

删除"；scoped"；属性将解决该问题，但非作用域CSS可能会影响页面中的其他元素(意外结果(

关于如何拥有"；scoped"；可以控制SVG元素样式的CSS代码

Answer 1

我使用:deep(::v-deep的简写(选择器解决了这个问题

a.my-btn:hover svg :deep(path) {  
fill: red;
fill-opacity: 1;
}

更多信息请点击此处：https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md