天天看點

element-ui預設樣式的修改

element-ui預設樣式的修改

直接上代碼,代碼後有效果圖,友善參考:

.el-table {

background-color: #0a1a31;

color: #cfdbe6;

font-size: 14px;

}

.el-table__body-wrapper::-webkit-scrollbar {

width: 12px;

height: 12px;

}

.el-table__body-wrapper::-webkit-scrollbar-thumb {

background-color: #409eff;

border-radius: 16px;

}

.el-table__body-wrapper::-webkit-scrollbar-corner {

background-color: #0a1a31;

}

.el-table th,

.el-table tr {

background-color: #0b1932;

}

.el-table–striped .el-table__body tr.el-table__row–striped td {

background-color: rgba(181, 222, 255, .09);

}

.el-table td,

.building-top .el-table th.is-leaf {

border-bottom: none;

}

.el-table::before {

height: 0px;

}

.el-table–enable-row-hover .el-table__body tr:hover>td {

background-color: #0a1a31;

color: #63C1FF;

}

最終效果,如下圖:

element-ui預設樣式的修改

建議第一次嘗試修改時,可将顔色設定成容易辨認的red等,友善對于出修改的具體位置,再對應修改成需要的顔色。

希望對大家有幫助!謝謝,希望每天代碼開心!

繼續閱讀