【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
}
相关推荐
wand codemonkey1 小时前
(三十)web应用+【核心】+【规矩】+【原理】
java·开发语言·前端
一拳一个娘娘腔1 小时前
【SRC漏洞挖掘系列】第02期:XSS与CSRF——Web世界的“偷家”艺术
前端·xss·csrf
软件开发技术深度爱好者1 小时前
轻量、安全、易用的HTML测试运行预览工具
前端·html
测试修炼手册1 小时前
[测试工具] Playwright Skill 和 Codex Chrome 浏览器操控的异同
前端·chrome·测试工具
真的不想写实验1 小时前
uniapp上传文件的载荷是个空对象
前端·uni-app
yuhaiqiang1 小时前
当程序员被ai逼到了悬崖边,还有哪些选择?
前端·人工智能·后端
D_jing204 小时前
Vue 3 + Element Plus 重置el-drawer样式失效
前端·javascript·vue.js
__log4 小时前
Vue 3 与 React 18+ 核心技术深度对比:从源码到实战
前端·vue.js·react.js
很晚很晚了8 小时前
纯前端转全栈 Day 1:我从第一个 NestJS 接口开始
前端
Lee川9 小时前
从零解剖一个 AI Agent Tool是如何实现的
前端·人工智能·后端