您的位置：首页 > 编程技术 > js  >  vue中使用/deep/失效的解决方法

vue中使用/deep/失效的解决方法

 更新时间：2022年11月24日 16:19  点击：1158 作者：怼怼你

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/无效内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/qq_40225369/article/details/118733197

[!--infotagslink--]

相关文章