ElementUI改變默認組件的樣式
- 描述
- 不同型別組件解決方法示例
- scoped問題
- 處理方法
描述
vue+elementui的開發組合應該是非常常見的了，elementui默認組件的樣式基本為藍色，在開發程序中避免不了對組件默認樣式進行修改，主要是顏色寬度高度等等，總所周知，elementui框架的標簽名即類名，在css直接可以直接寫.el-button{xxxx},但是實際上該框架在渲染成html元素時候，組件內部會有不同類名的div進行嵌套，因而直接選擇.el-button{xxxx}只能修改到很小一部分的樣式
不同型別組件解決方法示例
一、el-calendar日歷中每一行高度
默認css樣式：
.el-calendar-table .el-calendar-day {
box-sizing: border-box;
padding: 8px;
height: 85px;
}
若直接修改為.el-calendar-day {height: 100%;},應該是無效的，權重很明顯不夠，，不懂Css權重問題可以專門去查一下，
修改后樣式：
.el-calendar-table .el-calendar-day {
height: 100%;
}
若修改后效果無變化，除了scoped屬性問題以外可能是權重不夠，在原有基礎上增加權重即可（根據類名逐層增加即可，F12=>Elements / Ctrl+Shift+C選中之后最下方進行查看），修改為：
.el-calendar-table__row .el-calendar-day {
height: 100%;
}
/* ******或者****** */
.el-calendar-table .el-calendar-table__row .el-calendar-day {
height: 100%;
}
二、el-button默認/懸浮/選擇效果
對于一般的el-button直接選擇類就可以修改樣式，但是對于一些彈出框或者其他組件內部的el-button需要添加更多的權重進行修改，如下圖關閉訊息彈窗中的el-button，
（控制臺元素顯示 <div id='app')>和該彈窗不屬于同一個div，若css使用了嵌套寫法，可能被套在 <div id='app')>內而導致修改彈窗內按鈕的樣式無效，具體示例可以看下一個）
一并修改了懸浮和選中的效果，修改樣式如下：
.el-message-box__btns {
.el-button,
.el-button:hover,
.el-button:focus {
color : #fff;
background-color: @origin-Color;
border : 1px solid @origin-Color;
}
}
三、.el-menu--vertical導航中懸浮選單
//這是所使用的到組件el-menu，渲染之后存在<div id="app">中
.el-menu {
border: none;
text-align: left;
}
所以修改該選單的懸浮窗選單代碼應該如下：
.el-menu {
span {
margin: 1rem;
}
background-color: @origin-Color;
border: none;
text-align: left;
}
//不能進行嵌套寫法
.el-menu--vertical .el-menu .el-menu-item-group {
background-color: @origin-Color;
margin: -5px 0;
}
scoped問題
在vue頁面檔案中的<style>會有一個特殊的屬性scoped，當標簽有該屬性的時候，它的Css樣式只會作用于當前vue頁面之中，而不會影響到其他vue頁面中的元素，因此，在含有scoped屬性的style中撰寫關于改變elementui組件默認樣式的代碼是有些不會生效的（原因可能是涉及到頁面路由嵌套的問題）
處理方法
一、對于寫在components內的小組件，一般我會直接將style中的scoped屬性直接刪去，雖然組件可能存在重復使用的情況，但是一般不會重復撰寫相同的組件（可能涉及專案較小），因而直接刪去相關屬性即可，
二、可以在存放相關樣式的檔案夾中新建一個全域的樣式,用于存放修改elementui的代碼，并在main.js中引入使用即可
import "./xxx/styles/gobal.css"
三、在相關vue檔案的最后加入一對新的<style>標簽，即單個vue檔案中存在兩對<style>標簽，一對含有scoped標簽，一對不含有scoped標簽，
四、scoped穿透，使用>>>深度選擇或者 /deep/ 屬性，具體寫法可以另外查找一下，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305468.html
標籤：其他
上一篇：ES6-塊級作用域