使用餓了么官方出版的elementUI近半年了，提升的開發速率可不是一點半點，那真是蹭蹭的往上竄。但是在開發過程中會遇到一種情況：需要結合自己公司的業務，修改element的樣式，這就尷尬了。。。造成這種情況的原因是因為element的組件里面都有自己的樣式，scoped控制了外界樣式和當前組件不互通來防止組件間樣式重疊或沖突，所以你在當前頁面給<el-xxx>組件寫class，然后利用class去調整樣式是不可行的。
? ? ? ? 在剛開始開發過程中，嘗試了三種解決方案：
1、修改源碼：嘗試著去修改element源碼，修改其內部樣式為結合自己業務想要的樣式。但是假如修改了<el-input>的基礎樣式，我只想作用于某一模塊中，而不像全局都跟著修改這樣的話，可以在源碼中添加邏輯，增加一個參數，讓<el-input>知道是不是該特殊組件，然后可以利用三元表達式加上相應的特殊class來執行其css樣式。個人感覺此方式個別小需求還可以，由于自己水平有限，不敢大動源碼，怕傷害到本身，所以棄之。
2、打補丁：在開發項目過程中，新建了一個patch.css的文件，并在全局引用。這樣的話就突破了scope關鍵字的限制，直接開啟上帝視角，想改哪里就改哪里。這樣的方式不會破壞源碼，當然這樣的方式會比較亂，你還要結合看當前作用的.el-xxx--xxx .el-xxx--xxx .el-xxx 等一大串的css樣式，相互結合形成的樣式。而且你寫新的樣式去覆蓋el的老樣式時，需要特別注意css權重的問題，一定要比el組件內的權重高，不然不會生效的。
@import "vars";
// selct和input保持寬度一致
.el-select .el-input__inner, .el-input--suffix .el-input__inner {
? padding: 0 $dim_spacing_large5;
}
.el-input__inner {
? padding: 0 $dim_spacing_large5;
}
// 篩選條件板塊樣式
.el-form {
? background: $color_fg_contrast;
? border: $dim_radius_small5 solid $color_bg_white3;
? border-radius: $dim_radius_small3;
? padding: $dim_spacing_medium $dim_spacing_large5;
? margin-bottom: $dim_spacing_large2;
}
// table邊框處理
.el-table {
? border: $dim_radius_small5 solid $color_bg_white3;
}
// table-bg切換tabs時的背景處理
.tabs-bg .el-tabs__item.is-active {
? color: $color_fg_contrast;
? background: $color_bg_white2;
}
.tabs-bg .el-tabs__item:hover {
? color: $color_fg_primary;
}
// 側邊nav及其動態樣式
.el-submenu__title:hover {
? background-color: $color_bg_black2;;
? color: $color_fg_contrast;
}
.el-submenu__title {
? color: $color_bg_white4;
}
.el-menu {
? background-color: $color_bg_black3;
? border-right: $dim_radius_small5 solid $color_bg_black3;
}
.el-submenu .el-menu-item {
? background-color: $color_bg_black1;
? color: $color_bg_white4;
? text-align: center;
}
.el-menu-item:hover, .el-menu-item.is-active {
? background-color: $color_bg_black2;
? color: $color_fg_contrast;
}
// 左側導航li最低不能為200，修改為150
.el-submenu .el-menu-item {
? min-width: $dim_width_large3;
}
// 修改input篩選條件區域
.el-form-item__content {
? line-height: $dim_height_small0;
}
.el-form-item {
? margin-bottom: $dim_spacing_medium;
}
.el-form--inline .el-form-item__label {
? color: $color_fg_primary;
? font-size: $dim_font_medium1;
}
這是我在項目中結合一些特殊的點來做的修改。
3、封裝自己的組件：拿來主義，用別人現成的永遠都要受別人的限制和條件約束。畢竟吃人嘴短拿人手軟！！！自己寫自己的用著才最舒服，當然也最麻煩。最好結合自己的項目走向，做一些能夠長期使用并且能夠多平臺使用的組件會更好。寫之前可以參考下element的組件，它提供了哪些api，輸入參數需要什么，使用場景是什么，你想做成什么樣的功能，下面是我自己寫的一個比較簡單的field組件。
<template>
? ? <div>
? ? ? ? ? ? <label :class="(labelClass || 'label')+(toLines?'' : 'inline')">{{ label+(noColon)?'':':' }}</label>
? ? ? ? ? ? <div :class="twoLines?'twoLines':'inline'">
? ? ? ? ? ? ? ? <slot />
? ? ? ? ? ? </div>
????</div>
</template>
<script>
? export default {
? ? name: 'field',
? ? props: ['label', 'labelClass', 'twoLines', 'noColon']
? }
</script>
<style>
? @import "../../assets/css/vars.scss";
? @import "../../assets/css/font.scss";
? .label {
? ? @extend .font-bold;
? ? width: $dim_width_large1;
? }
</style>
