使用elementUI時,我們經常需要對其中某些組件的樣式進行自定義,介紹一種最簡單的方式。
這是使用組件自帶樣式寫出來的對話框:
我需要做成這樣:
方法一
step1:
在頁面上審查元素,找到控制元素的樣式:
如圖:控制對話框頂端的類名是.el-dialog_header,我們就對這個類進行重寫
step2:
在頁面上再添加一個<style></style>標簽,注意不需要scoped作用域,不然修改不了。
將該元素包裹在某個父元素內,如圖.appManage就是.el-dialog_header的一個父標簽,這樣能避免改寫全局樣式。
方法二
在需要更改組件樣式的頂層容器的樣式前,加上 /deep/
如圖:
更改組件樣式和寫自定義樣式互不影響。