修改element ui的样式,如何使用/deep/ 或::v-deep

本文介绍了在Vue中如何修改组件样式,重点讲解了在scoped内修改样式以避免全局污染的方法。当scoped内样式不生效时,可以使用/deep/、>>>或::v-deep进行深度选择器穿透。对于SCSS语法,推荐使用::v-deep。文章还提供了具体代码示例,帮助开发者理解并正确使用这些技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、在哪修改样式 

    在修改element样式时,最好在scoped中修改避免全局污染。

    如果在scoped中修改样式不生效就在全局中修改,但是在要修改的样式外面套一层class,避免修改了所有页面

<style>
  .commit-save .el-loading-spinner  .path{   
      stroke: #1f8d61 !important;      
   }

</style>

2、使用/deep/ 、>>>和::v-deep

<div class="commit-save" v-loading="loading">
</div>

1、/deep/和>>>等效,如果使用这个不生效的话就换另一个

<style  scoped>
  .commit-save /deep/ .el-loading-spinner  .path{   
      stroke: #1f8d61 !important;      
   }

  /*  如果/deep/无效,就换>>> */
.commit-save >>> .el-loading-spinner  .path{   
      stroke: #1f8d61 !important;      
   }
</style>

 2、如果lang="scss",就不能使用/deep/和>>>,要使用 ::v-deep

<style lang="scss" scoped>
    .commit-save ::v-deep .el-loading-spinner {
      .path {
         stroke: #1f8d61 !important;
      }
   }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值