vue中使用/deep/失效的解决方法
更新时间：2022年11月22日 14:28:38 作者：怼怼你
这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器，则可以使用/deep/， 如果/deep/ 无效，则使用 ::v-deep，本文给大家讲解的非常详细需要的朋友可以参考下
1. 若是没有使用像less, sass等这样的css预处理器， 那么是只能使用 >>>这样的css深度选择器
<style scoped>
.box >>> el.dialog {
}
</style>2. 若是使用了css预处理器，则可以使用/deep/， 如果/deep/ 无效，则使用 ::v-deep
<style scoped lang="scss">
.box /deep/ el.dialog {
}
</style>或
<style scoped lang="scss">
.box ::v-deep el.dialog {
}
</style>3. 如果使用了css预处理器，使用/deep/ 和::v-deep 都失效，那么需要看看style 上是不是没有加上 scoped。若加上了还是无效，那么就只能把代码写入全局css中了，但是需要注意用一个css类包裹起来，不然会改变很多全局样式。
<style>
.box .el-dialog {
}
</style>或
<style lang="scss">
.box .el-dialog {
}
</style>到此这篇关于vue中使用/deep/失效的解决办法的文章就介绍到这了,更多相关vue /deep/无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了vue计算属性的使用和vue实例的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了vue请求后端数据和跨域问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-05
这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了Vue 实现前进刷新后退不刷新的效果,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了vue语法之render函数和jsx的基本使用,在Vue中是支持jsx的,凡是我们是比较少在Vue中使用jsx的,jsx在react中使用的更加广泛,因此在这里我简单介绍一下jsx的基本使用，需要的朋友可以参考下2022-08-08
在vue组件通信中其中最常见通信方式就是父子组件之中的通信，而父子组件的设定方式在不同情况下又各有不同。这篇文章主要介绍了Vue---父子组件之间的通信,需要的朋友可以参考下2018-09-09
关于el-table-column的formatter的使用及说明
这篇文章主要介绍了关于el-table-column的formatter的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue项目如何配置public静态资源路径访问方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家介绍了手写vue2下拉菜单dropdown组件实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了如何解决ECharts图表切换后缩成一团的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论