Vue中修改Element UI元件庫中的選擇器背景色不生效的解決方法

問題描述

在專案中需要實現如下所示的控制元件樣式：

 

選擇器使用了Element UI元件庫中的select控制元件，但是該控制元件並沒有提供修改背景顏色的介面或方法，所以只能自己通過強行修改元件原始碼中的類樣式來實現，如下所示：

.mapviewSelect input {
    background-color: #071D2B !important;
    color: #ffffff;
}
.mapviewSelect-option {
    background-color: #071D2B !important;
}
.el-select-dropdown {
    background-color: #071D2B !important;
}

但是通過以上的程式碼去修改的時候，發現不生效。

 

解決方法

查閱資料發現，是要在類樣式前面加入/deep/或者取消<style>標籤的scoped屬性。所以乾脆自己新建了一個樣式檔案，然後在引入此檔案的時候就不新增scoped屬性即可。