背景:引用Elementui组件库开发,为避免污染全局样式,所有的组件style标签均加上了scoped属性,在A组件中引用了Elementui的步骤条Step组件后,希望修改Step组件的字体颜色但是发现没有生效。
原因:父组件的 scoped 样式不能穿透到子组件上。
解决方案:使用 vue-loader 的写法/deep/
或者>>>
解决
假设classA是父组件A根div的class名,span为要修改的子组件Step的元素,则写法如下:
/deep/
.classA /deep/ span {
*some prop
}
>>>
.classA >>> span {
*some prop
}