【sass】 中使用 /deep/ 修改 elementUI 组件样式报错

element plus 想要覆盖组件的样式,想到了/deep/样式穿透,但样式一直不生效,代码如下:

css 复制代码
<style scoped lang="sass">
.main_wrapper{
	padding: 0 53px
	position: relative
	top: -20px
}
>>> .el-tabs__item{
    height: 30px
    line-height: 30px
    color: #fff!important
}

</style>

上边的写法不会报错,但是也不会生效。改用下面的方式:

css 复制代码
<style scoped lang="sass">
.main_wrapper{
	padding: 0 53px
	position: relative
	top: -20px
}
/deep/ .el-tabs__item{
    height: 30px
    line-height: 30px
    color: #fff!important
}

这样就报错了,SassError: expected selector

解决方法:

尝试用 ::v-deep 替换 /deep/ ,成功解决了问题。

css 复制代码
<style scoped lang="sass">
.main_wrapper{
	padding: 0 53px
	position: relative
	top: -20px
}
::v-deep(.el-tabs__item){
    height: 30px
    line-height: 30px
    color: #fff!important
}
相关推荐
wyzqhhhh14 小时前
npm相关知识
前端·npm·node.js
卢叁14 小时前
Flutter之全局路由事件监听器RouteListenerManager
前端
盗德14 小时前
为什么要用Monorepo管理前端项目?(详解)
前端·架构·代码规范
五号厂房14 小时前
ProTable 大数据渲染优化:实现高性能表格编辑
前端
右子14 小时前
理解响应式设计—理念、实践与常见误解
前端·后端·响应式设计
KaiSonng14 小时前
【前端利器】这款轻量级图片标注库让你的Web应用瞬间提升交互体验
前端
二十雨辰14 小时前
vite性能优化
前端·vue.js
明月与玄武14 小时前
浅谈 富文本编辑器
前端·javascript·vue.js
paodan14 小时前
如何使用ORM 工具,Prisma
前端
布列瑟农的星空15 小时前
重学React——memo能防止Context的额外渲染吗
前端