vue style penetration::specific use of v-deep

This article mainly introduces the specific use of vue style penetration::v-deep. The article introduces it in great detail through example code. It has certain reference learning value for everyone's study or work. Friends who need it follow the editor below. Come and study together

I have used it in projects before element UI. It is very easy to use and has a rich set of components. Even if this is the case, you will definitely need to use additional styles to build your own applications in the project. If you write it directly in <style lang="scss" scoped> .... </style>, it will only affect the style in the current component, but if you remove it, scopedit will affect the global style.

I tried many methods but didn't get a good solution. In the end, I solved it by reading the official documents . In fact, the official document has already provided a solution. I blame myself for not reading the document carefully and not being familiar enough with Vue.

Depth action selector

If you want scopeda selector in a style to act 'deeper', for example affecting child components, you can use >>>the operator:

<style scoped> 
.a >>> .b { /* ... */ } </style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* … */ }

Some Sasspreprocessors like can't parse it correctly >>>. In this case you can use /deep/the or ::v-deepoperator instead - both are >>>aliases for and will work just as well

For example:

1If >>>vue’s style uses css, then

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

But preprocessors like scss cannot parse >>>, so we use the following method.

2 /deep/

<style lang="scss" scoped>
.a{
 /deep/ .b { 
  /* ... */
 }
} 
</style>

However, some developers reported that when compiling vue-cli3, the deep method will report errors or warnings. At this point we can use the third method

3 ::v-deepRemember that it must be a double colon

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

Usage scenario:
When we need to override element-uithe style in , we can only use the depth action selector. styleWhen the selector cssis , the writing method is as follows

.a >>> .b {
 ***
}

Style uses the css preprocessor (less, sass, scss) to write as follows

// 第一种/deep/
/deep/ .a {
 ***
}

// 第二种::v-deep
::v-deep .a{
 ***
}

It is recommended to use the second method. /deep/ will report an error at some point. ::v-deep is safer and compiles faster.

Note: Dynamically generated content is not `scoped`affected by

Content v-htmlcreated via is not affected by styles, but you can still style them viaDOMscoped深度作用选择器 >>>

Author: Chen Xi
Link: https://juejin.cn/post/6981341589763260430
Source: Rare Earth Nuggets
Copyright belongs to the author. For commercial reprinting, please contact the author for authorization. For non-commercial reprinting, please indicate the source.