vue項目中修改第三方庫的組件樣式的方法


在vue項目中,如何修改框架或者引用的第三方庫的組件樣式呢?

修改不了的原因:

<style> 標簽添加了 scoped 屬性,它的 CSS 只作用於當前組件中的元素,自然權重是小於全局樣式的,所以,樣式覆蓋不了

解決方法:

1.去掉<style>標簽的scoped 屬性,即使用全局樣式

2.使用深度作用選擇器/deep/,使用方式:將/deep/ + space空格 添加在第三方樣式類的前面。如果是使用less語法的話,直接在第三方樣式的最外一層添加一遍/deep/就可以了
注意事項:如果/deep/添加多了,google瀏覽器下會報警告,需要打開控制台的Elementsctrl + f查找/deep/,搜索到了的話,需要在對應的css位置刪除掉

/deep/ .classnamefromother {
    /*css樣式代碼...*/
}

參考原文鏈接:
https://blog.csdn.net/weixin_41000111/article/details/80450397
參考官方網址:
https://vue-loader.vuejs.org/zh/guide/scoped-css.html#子組件的根元素


免責聲明!

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



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