VUE-element-UI修改內置樣式


在VUE中使用element-UI有的時候會帶有很多的默認css樣式,很難修改,因為大部分都是內置樣式,權重比較高,這種基本上有以下幾種方法

1.額外給當前元素加上id,class進行樣式覆蓋修改

2.權重不夠!important來補,但是慎用,對於性能很不友好

這種都是在當前開發工具上能看到該元素的方式,但是有的時候在開發工具你看到的可能只是<el-button>,控制台卻打印出來很多層element生成的元素,你無法在開發工具選中,這個時候

1.在控制台找到該元素的class名

2.在你的樣式表下加一個新的style標簽注意不要有scope(因為VUE為了防止組件之間樣式污染,會自帶樣式私有化,這會導致你的樣式不會生效與當前開發工具當前頁面之外的元素,也就是element自動生成的元素)

3.在這個style標簽里用這個class名書寫樣式進行覆蓋,就OK了


免責聲明!

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



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