【开发问题记录】vue3使用less,scoped后发现:deep不生效
vue3 淘汰了 ::v-deep 要修改样式的类名{ 内容}vue3 采用:deep(要修改样式的类名) {内容}源代码这样不生效,在 vue3 中,需要vue3的template里加上父标签,并在less中使用父标签包裹 要穿透的样式内容<style scoped lang='less'>// 组件的 其他样式:deep(.xtx-carousel) {height: 380px;
·
vue3 淘汰了 ::v-deep 要修改样式的类名 { 内容 }
vue3 采用 :deep(要修改样式的类名) { 内容 }
源代码
这样不生效,在 vue3 中,
需要vue3的template里加上父标签,并在less中使用父标签包裹 要穿透的样式内容
<style scoped lang='less'>
// 组件的 其他样式
:deep(.xtx-carousel) {
height: 380px;
.carousel {
&-indicator {
bottom: 30px;
span {
&.active {
background: @xtxColor;
}
}
}
&-btn {
top: 110px;
opacity: 1;
background: rgba(0, 0, 0, 0);
color: #ddd;
i {
font-size: 30px;
}
}
}
}
}
</style>
正确做法 ↓
<style scoped lang='less'>
.goods-relevant {
// 覆盖 子组件的样式
:deep(.xtx-carousel) {
height: 380px;
.carousel {
&-indicator {
bottom: 30px;
span {
&.active {
background: @xtxColor;
}
}
}
&-btn {
top: 110px;
opacity: 1;
background: rgba(0, 0, 0, 0);
color: #ddd;
i {
font-size: 30px;
}
}
}
}
}
</style>
更多推荐
已为社区贡献1条内容
所有评论(0)