vue中样式穿透的三种写法
1.>>>在less中使用2./deep/在less中使用3.::v-deep在scss中使用
·
在vue项目中,当我们使用第三方组件库时,例如(element-ui、vant)时,遇到需要修改组件中第三方组件库中的样式,但同时又不想去除scoped属性造成组件之间的样式覆盖,这时,我们就可以使用样式穿透来解决这个问题
样式穿透的方式
1. 通过>>>穿透scoped
<style scoped>
外层>>>第三方组件类名{
样式
}
</style>
当Sass、Less之类的预处理器无法解析>>>,可以使用/deep/或者::v-deep
2. /deep/ 在less中使用
<style lang='less' scoped>
/deep/ 第三方组件类名{
样式
}
</style>
3. ::v-deep 在scss中使用
<style lang='scss' scoped>
::v-deep 第三方组件类名{
样式
}
</style>
案例:
// 样式
.container {
width: 100px;
height: 80px;
>>> .box {
margin-top:15px; !important;
}
}
// Less || Sass
.container {
width: 100px;
height: 80px;
/deep/ .img {
margin-top:15px; !important;
}
}
.img-container {
border-radius: 50%;
::v-deep img {
width: 60px;
height: 60px;
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)