这几天在写一个项目的时候根据需求需要修改element UI的部分样式，但是直接在组件里修改样式却不生效，后来查询网上的资料发现因为scoped局限于当前组件所以修改无法生效，这里参考网上搜索的内容粘贴一段文章以防之后忘记
为什么scoped会使样式修改无效 在vue组件中我们经常需要给style添加scoped来使得当前样式只作用于当前组件的节点。添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像”data-v-1233”这样唯一属性的标识，当然也会给当前style的所有样式添加[data-v-1233]这样的话，就可以使得当前样式只作用于当前组件的节点。
css深度作用选择器的作用
如果使用了scoped后,无法修改第三方UI组件库组件的样式，这里可以使用css深度作用选择器，以作样式修改。
例：vue项目中，经常需要使用如elementUI等组件库，有些样式直接在组件中修改无效，因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。针对这种情况，可以使用深度作用选择器（即样式穿透）。
具体用法
1、如果项目使用的是css原生样式，那么可以直接使用 >>> 穿透修改
style scoped>
/*编译前*/
#test >>> .el-checkbox__label{ color: red; }
/*编译后*/
#test[data-v-f3f3eg9] .el-checkbox__label {color:red; }
</style>
2、项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
注意：vue-cli3以上版本不可以
<style lang="scss" scoped>
/*用法1*/
.a {
/deep/ .b { color:red; }
}
/*用法2*/
.a /deep/ .b { color:red; }
</style>
3、如果使用了预处理器都可以使用 ::v-deep
<style lang="scss" scoped>
/*用法1*/
.a{
::v-deep .b { color:red; }
}
/*用法2*/
.a ::v-deep .b { color:red;}
</style>
