vue中element-ui組件默認css樣式修改的四種方式
前言
修改element-ui組件的默認樣式一直是一個老生長談的話題,在做完公司的一整個項目後,我總結瞭以下4種修改element-ui默認樣式的方法。
1.使用全局統一覆蓋
針對一些通用的、樣式固定的組件,可以全局處理,其方法是新建一個css或者scss文件,覆蓋element原有的class
你可以在src/styles目錄下新建一個element-ui-reset.scss,根據UI的需要,修改原有的class名稱
使用scss的好處是可以使用變量,來應對UI的不同變化
比如我們常用的按鈕、分頁、復選框等組件,在UI中基本都是同樣的設計,那麼我就就可以統一修改這些樣式
element-ui-reset.scss
$danger-btn-color: #F25454; $primary-btn-color:#3d66e4; $success-btn-color:#12A763; //修改默認按鈕顏色 .el-button--primary{ background-color: $primary-btn-color; border-radius: 4px; //border: 1px solid $primary-btn-color; font-size: 16px; border: 0; } //修改危險按鈕的顏色 .el-button--danger{ background-color: $danger-btn-color; border-radius: 4px; //border: 1px solid $danger-btn-color; font-size: 16px; border: 0; } //修改成功按鈕的顏色 .el-button--success{ background-color: $success-btn-color; border-radius: 4px; //border: 1px solid $success-btn-color; font-size: 16px; border: 0; } //修改默認按鈕的顏色 .el-button--default{ font-size: 16px; border-radius: 4px; } //修改成功按鈕的顏色 .el-button--warning{ //background-color: $success-btn-color; border-radius: 4px; //border: 1px solid $success-btn-color; font-size: 16px; border: 0; } //修改分頁顏色 .el-pagination{ position: absolute; display: inline-block; margin: 0 auto; left:50%; transform: translateX(-50%); background-color: #fafafa; border: solid 1px #dfe8eb; padding: 0 !important; .el-pager{ margin: 0 !important; .number{ color: #3d66e4 !important; border-left: 1px solid #dfe8eb; border-right: 1px solid #dfe8eb; background-color: #fafafa !important; &.active{ color: #fff !important; //border: 1px solid #3d66e4; background-color: #3d66e4 !important; border: 1px solid #3d66e4 !important; } } } } .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{ margin: 0 !important; background-color: #fafafa !important; } //修改checkbox .el-checkbox__inner{ border: 1px solid #C0C0C0 ; width: 16px; height: 16px; border-radius: 0; }
然後在你的main.js中引入
import './src/styles/element-ui-reset.scss'
這樣
優點
- 全局覆蓋,省事
- 使用scss更加靈活
- 可以隨時刪除樣式的覆蓋
缺點
- 局部修改時需要重新覆蓋
- 所有被修改的組件樣式都是一樣的
2.在.vue文件中修改
這種方法是在vue文件中新加一個style標簽
用於修改一些特定的組件樣式,但不會全局應用
比如,某個.vue文件中需要一個特別定制的table組件,而其它文件則需要用原來的樣式
這樣,我們最好的處理方式就是在.vue文件中新加一個style標簽
在這裡修改table的默認樣式
<template> <div class="my-class"> <el-table> </el-table> </div> </template> <script> </script> <style scoped="scoped" lang="scss"> </style> <style> /* 修改element-ui中table組件的樣式 */ .my-class__expand-column .cell { display: none; } .my-class .el-table tbody tr:hover>td { cursor: pointer; } .my-class .el-form .el-form-item .el-input__inner:focus{ border: 1px solid #3D66E4; } </style>
但請註意,一定要加上唯一的作用域 即最外層的class名,比如我上面的my-class 。 它限定瞭當前table的修改樣式隻能在該class以及其子元素中生效
否則,table的樣式仍會全局覆蓋
當然,如果你願意,可以將class換成id,這樣保證瞭class名不會沖突
<template> <div id="my-class"> <el-table> </el-table> </div> </template> <style> /* 修改element-ui中table組件的樣式 */ #my-class__expand-column .cell { display: none; } #my-class .el-table tbody tr:hover>td { cursor: pointer; } #my-class .el-form .el-form-item .el-input__inner:focus{ border: 1px solid #3D66E4; } </style>
這種方式的好處在於你可以動態的綁定某些class
<template> <div id="my-class"> <el-table :class="my-table"> </el-table> </div> </template> <style> /* 修改element-ui中table組件的樣式 */ #my-class__expand-column .cell { display: none; } #my-class .el-table tbody tr:hover>td { cursor: pointer; } #my-class .el-form .el-form-item .el-input__inner:focus{ border: 1px solid #3D66E4; } #my-class .my-table { } </style>
優點
- 靈活自定義,可以動態綁定
- 不會全局修改
缺點
- 需要指定唯一的class作用域
3.修改組件的style樣式
這種方法我不是很推薦,拋開冗餘不說,其實不敢保證其生效(依賴element-ui源碼的支持程度)。
但是,對於某些使用頻率很低但需要動態綁定屬性的組件,你可以使用它
比如這個<el-backtop>組件,我可能需要給它綁定一些動態的樣式屬性
這樣你就可給它綁定style
<el-backtop target="" :bottom="100" > <div :style="{ height: 100%; width: _width; background-color: #f2f5f6; box-shadow: 0 0 6px rgba(0,0,0, .12); text-align: center; line-height: 40px; color: #1989fa; border-radius: 50%; }"> <i class="el-icon-caret-top"></i> </div> </el-backtop> data() { return{ _width: 50% } }
優點
- 靈活方便
- 動態綁定
缺點
- 冗餘
- 耦合性高
4. 參考element-ui官方文檔的api
有些組件官網給瞭修改樣式的api
你可以按照api來指定組件的樣式
優點
- 官方
缺點
- 支持組件較少
疑問
為何要新加一個style標簽 ?
因為在實際使用過程中,我發現寫在帶有scoped屬性的某些class並不對element-ui的組件生效
這造成有的修改樣式可以用,有的不可以,所有就索性重新寫瞭瞭style標簽
為何不用!important屬性
這傢夥太霸道瞭,比全局修改還要強制。況且寫起來很麻煩
為何不用::v-deep穿透
首先,拋開寫法惡心來說,其耦合性太高
假如在你不需要樣式覆蓋的時候,你隻需要刪除新的style標簽
而用::v-deep 的話,逐行去改誰受得瞭
總結
上面的方法並不是很官方的做法,而是我日常開發中踩坑後,總結出來的方法
雖說不太完美,但很大程度上解決我的問題
到此這篇關於vue中element-ui組件默認css樣式修改的文章就介紹到這瞭,更多相關vue element-ui組件默認css樣式修改內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 圖文詳解Element-UI中自定義修改el-table樣式
- element表格去掉表頭的實現方法
- vue自定義封裝按鈕組件
- element-UI el-table樹形數據 修改小三角圖標方式
- 帶你瞭解CSS基礎知識,樣式