elementUI默認樣式修改不成功的問題

問題：

login.vue中引入<style lang="postcss" src="./login.css" scoped></style>

login.css中

.el-input__inner {
    background-color: rgba(255,255,255,.2);
}

設置el-input的樣式沒有效果。

解決方法：

是因為scoped的原因。去掉scoped就可以顯示樣式。

但此時會污染全局樣式，所以將該樣式放在控制全局樣式的文件里（比如app.css）。

為了不讓所有的el-input都變透明，所以給需要透明的el-input添加一個類lucencyInput

.lucencyInput .el-input__inner {
    background-color: rgba(255,255,255,.2);
}

 原因：

 

組件的scoped會給寫的每一個樣式添加一個唯一的過濾器[data-],對應的模板也會加一個data-屬性，這樣就保證了樣式只對當前組件有效。

這樣我們寫的.el-input__inner會帶一個過濾器，但是element組件中卻沒有，自然樣式就不生效了。

ps：還有一種情況，像el-button這種，寫在scoped的樣式是生效的。因為el-button屬於第一層，也會被當前組件加一個data-，

        而上面el-input__inner是屬於el-input里面的類，當前組件只能給第一層el-input加一個data-,但是里層的相當於是子組件內部的東西了，是不會加data-的。

        （這里比較繞，可以打開瀏覽器，自己調試一下就明白了了）