深度选择器 - Element UI修改样式

问题

Vue项目使用Less预处理，在Vue组件中使用两个style标签，一个加上scoped属性，一个不加scoped属性，把需要覆盖的css样式写在不加scoped属性的style标签里。在修改Element UI el-tab的样式时，本机样式生效，部分同事无论是打包前还是打包后都不起作用，chrome浏览器。

<style>
.form-tab /deep/ .el-tabs__content {
    flex-grow: 1;
     overflow-y: scroll;
 }
 </style>

什么是scoped

在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化

解决

改了下写法,重点是scoped ，写在scoped里面全都可以了。

<style scoped>
.form-tab /deep/ .el-tabs__content {
    flex-grow: 1;
     overflow-y: scroll;
 }
 </style>

深度选择器（样式穿透）

1. >>> 不建议

// stylus || style
<style scoped>
.form-tab >>> .el-tabs__content {
    flex-grow: 1;
     overflow-y: scroll;
 }
 </style>

2. /deep/

// Less || Sass
<style scoped>
.form-tab /deep/ .el-tabs__content {
    flex-grow: 1;
     overflow-y: scroll;
 }
 </style>

3. ::v-deep

<style scoped>
.form-tab {
	::v-deep .el-tabs__content {
	    flex-grow: 1;
	    overflow-y: scroll;
  }
 }
 </style>