vue3使用less,scoped后发现:deep不生效

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>

vue3使用less,scoped后发现:deep不生效相关推荐

添加scoped后，某些css样式不起作用
为了防止页面样式污染,我们需要在style标签里添加scoped,但会遇到加上scoped后,某些样式不起作用的问题所以我们需要深度作用选择器有多种方法 /deep/ ::v-deep div / ...
vue3 项目修改打包后的引用路径，调整图片压缩成base64的门槛
vue3 项目修改打包后的引用路径,调整图片压缩成base64的门槛前言解决完事前言最近的项目中需要在程序中显示一个H5页面,所以按照官方VUE CLI的教程创建了一个项目开始整.整到最后打 ...
无法使用_解决kali linux 2020 安装完后发现无法使用 ifconfig
鱼蛋计算机交流群总部: 606219746 鱼蛋计算机交流分群002: 212088123 鱼蛋计算机交流分群003: 1020025486 鱼蛋计算机交流分群004:1158384728 (建议加此 ...
入职后发现公司是外包全职_我如何通过全职工作，伴侣和3岁的双胞胎男孩打造产品...
入职后发现公司是外包全职 by Courtney 通过考特尼我如何通过全职工作,伴侣和3岁的双胞胎男孩打造产品 (How I built my product with a full-time jo ...
Eclipse复制或修改项目后，把项目部署后发现还是原来的项目名称
Eclipse复制或修改项目后,把项目部署后发现还是原来的项目名称解决: 到项目根目录打开.setting文件夹,找到"org.eclipse.wst.common.component&q ...
更新至Android Studio4.1后发现as打不开的解决方案
前言今天收到了as更新4.1推送,更完后发现打不开了,报下面的错误 Internal error. Please refer to https://code.google.com/p/android ...
打开黑色_表哥出差带回来一箱苹果，打开后发现是黑色的，大家表示都没见过...
说到水果我想每个人都有一种或者几种爱吃的水果吧?水果口感酸甜,深受广大食客的喜爱,而且常吃水果还可以补充人体的所需的营养物质,从而调节人体的营养均衡,尤其是到了冬季天气比较干燥多吃一些水果还可以补充更 ...
linux不显示无线网卡驱动安装失败,Linux_Ubuntu无线网卡驱动安装方法，安装了Ubuntu后发现没有无线网 - phpStudy...
Ubuntu无线网卡驱动安装方法安装了Ubuntu后发现没有无线网络,搜索不到WiFi,但是正常情况下安装Ubuntu后,系统会自动安装无线网卡驱动,并且开机自动连接无线网.查了一下,原来我的网卡是 ...
日常问题——hadoop启动后发现namenode没有启动，但是排除了格式化过度的问题
hadoop启动后发现namenode没有启动,网上说的格式化过度的问题我是没有的,因为我只格式化过一次.之后查看日志 vim /opt/hadoop/logs/namenode对应的log文件发现 ...

vue3使用less,scoped后发现:deep不生效

vue3使用less,scoped后发现:deep不生效相关推荐

最新文章

热门文章