vue中使用/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>

原创文章,作者:WBKZC,如若转载,请注明出处:http://www.wangzhanshi.com/n/15147.html

(0)
WBKZC的头像WBKZC
上一篇 2025年1月1日 17:07:42
下一篇 2025年1月2日 12:15:23

相关推荐

发表回复

登录后才能评论