解决vue组件style添加scoped属性后自定义样式失效的问题

背景:引用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
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容