Table of contents
background
During the development process of the vue project, the ElementUI component was used and the style used the scoped attribute. When I wanted to modify the component style, I found that I could not modify it directly. I had to remove the scoped attribute or use a depth selector to modify it successfully. Removing scoped will affect the global style. In this case, you can use the depth effect selector (that is, style penetration)
::Usage of v-deep_Front-end_Bad front-end writing-Huawei Cloud Developer Alliance
use:
1. When the CSS native style is used in the project, you need to use the >>> depth selector to modify the style of the external third-party component.
<style lang="css" scoped>
.el-button >>> span{
color: '#f00'
}
</style>2. When the CSS extension language used in the project is less, you need to use /deep/ or ::v-deep depth selector to modify the style of external third-party components.
<style lang="less" scoped>
/deep/.el-button{
span{
color: '#f00'
}
}
.el-button::v-deep{
span{
color: '#f00'
}
}
</style>3. When the CSS extension language used in the project is node-sass, you need to use the /deep/ or ::v-deep depth selector to modify the style of external third-party components.
<style lang="scss" scoped>
.el-button::v-deep{
span{
color: '#f00'
}
}
/deep/.el-button{
span{
color: '#f00'
}
}
</style>4. When the css extension language used in the project is dart-sass, you need to use the ::v-deep depth selector to modify the style of external third-party components. dart-sass does not support /deep/ and >>>.
<style lang="scss" scoped>
.el-button::v-deep{
span{
color: '#f00'
}
}
</style>
Notice:
① The operator >>> may report an error because it cannot be compiled. You can use /deep/
② Using /deep/ in vue3.0 will report an error. It is more recommended to use::v-deep
③ For those who use css preprocessor (scss, sass, less), the depth selector::v-deep is more general