【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
}
相关推荐
和blue一起变得更好2 分钟前
周三:Vue3高级组件特性
前端·javascript·vue.js
happyprince6 分钟前
10-Hugging Face Transformers 量化系统深度分析
java·前端·数据库
AskHarries6 分钟前
如何使用 OpenClaw Skill
前端
AI周红伟19 分钟前
Agent Skills生产级Skills 案例实操-周红伟
前端·chrome·react.js·langchain
用户862841295494427 分钟前
Flutter rxflare 响应式进阶:Map/List 精准字段更新(高性能实战)
前端·flutter
横木沉28 分钟前
高并发场景下的前端缓存与降级策略
大数据·前端·缓存
我命由我1234536 分钟前
VSCode - VSCode 自定义折叠区域
前端·javascript·ide·vscode·前端框架·编辑器·js
cc.ChenLy42 分钟前
Lottie-Web 技术指南:让动画开发更简单高效
前端
bug总结1 小时前
前端流程图vueflow
前端·流程图
清水白石0081 小时前
Python 数据建模指南:dataclass、TypedDict 与 Pydantic 的选型博弈
前端·javascript·python