scoped penetration: component style modification of VUE+Element-UI

When using the Element-UI component to write, if you find that the style needs to be modified, then you need to use penetration to modify it. The following is the method of using the deep access (style penetration) function in different preprocessing languages:

1. >>>

If the lang of the style in the Vue project is  css , then:

<style lang="css" scoped>
.a >>> .b { 
   // css 样式
}
</style>

But sometimes  >>> this kind of writing is not recognized by the scss or less preprocessor.

2. /deep/

If the lang of the style in the Vue project is  less , then:

<style lang="less" scoped>
.a{
   /deep/ .b { 
      // css 样式
   }
} 
</style>

3. ::v-deep

If the lang of the style in the Vue project is  scss , then:

<style lang="scss" scoped>
.a{
   ::v-deep .b { 
      // css 样式
   }
} 
</style>

Tips: If penetration modification is required, the scoped in the style is also essential when penetrating.