【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
}
相关推荐
无糖可可果1 分钟前
React 性能优化利器:深入理解 `useCallback`、`useMemo` 与 `React.memo`
前端
Yoram4 分钟前
JavaScript 错误处理的一种整理与实践
前端
你听得到118 分钟前
排查 App 问题:别只盯着报错,把前后发生的事情串起来
android·前端·flutter
lllsure20 分钟前
Vue&React Router
前端·vue.js·react.js
weixin_4316004421 分钟前
为什么 Agent REPL 要上 Ink:好处、用法与内部设计
前端·学习·ai·agent·ai编程
IT_陈寒35 分钟前
Java 8的stream让我debug了一整天,气笑了
前端·人工智能·后端
sugar__salt39 分钟前
深入理解 React useContext:跨层级组件通信的核心利器
前端·javascript·react.js·前端框架·框架
小黑技术栈1 小时前
web前端基础到入门——14day
前端·数据库·oracle
谷哥的小弟1 小时前
TypeScript类型断言
前端·javascript·typescript
智塑未来2 小时前
鸿蒙系统小红书隐私保护——应用锁开启指南
服务器·前端·harmonyos