Vue 中 css scoped 樣式穿透 ( stylus[>>>] / sass / less[/deep/] )


scoped看起來很好用,當時在Vue項目中,當我們引入第三方組件庫時(如使用element-ui),需要在局部組件中修改第三方組件庫樣式,而又不想去除scoped屬性造成組件之間的樣式覆蓋。這時我們可以通過特殊的方式穿透scoped

  • 1、stylus的樣式穿透 使用 >>>
.wrapper >>> .swiper-pagination-bullet-active
   background: #fff
  • 2、sass和less的樣式穿透 使用 /deep/
// 語法
外層 /deep/ 第三方組件 {
	樣式
}

// eg
.wrapper /deep/ .swiper-pagination-bullet-active{
	background: #fff;
}

覺得有幫助的小伙伴點個贊支持下~

覺得有幫助的小伙伴點個贊~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM