快速修改elementUI組件樣式


使用elementUI時,我們經常需要對其中某些組件的樣式進行自定義,介紹一種最簡單的方式。

這是使用組件自帶樣式寫出來的對話框:


我需要做成這樣:


方法一
step1:
在頁面上審查元素,找到控制元素的樣式:

如圖:控制對話框頂端的類名是.el-dialog_header,我們就對這個類進行重寫

step2:
在頁面上再添加一個<style></style>標簽,注意不需要scoped作用域,不然修改不了。
將該元素包裹在某個父元素內,如圖.appManage就是.el-dialog_header的一個父標簽,這樣能避免改寫全局樣式。


方法二
在需要更改組件樣式的頂層容器的樣式前,加上 /deep/
如圖:


更改組件樣式和寫自定義樣式互不影響。


免責聲明!

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



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