關於element ui input、以及button樣式不能覆蓋的解決辦法（登錄頁面）

在做登錄界面的時候，因為沒有進行手寫html以及樣式，使用了elementui的樣式，我頁面的需求是要自適應屏幕的，所以就要將所有的元素都要進行寬高寫成百分比的形式，

這個時候就需要修改element ui  中元素的樣式，

以用戶名輸入框為例子   首先想到的就是重寫input樣式，找到頁面中元素的class，然后重新寫上一個樣式，

如下：

    .login-form__item{
        margin-bottom: 20px;
        
        .el-input__inner {
            height: 60px !important;
            background-color:red !important;
        }
    }

但是寫上之后，問題來了怎么都不生效  important 我也加上了

原因：

　　因為我在頁面中樣式寫了 scoped，vue-load官網中有說明，使用了scoped之后父組件中寫的樣式將不會滲透到子組件中去

參照官網地址：

　　https://vue-loader.vuejs.org/zh/guide/scoped-css.html 

截圖：

 

 解決辦法：

第一種：可以混用style   混用本地的和全局樣式

你可以在一個組件中同時使用有 scoped 和非 scoped 樣式：

<style>
/* 全局樣式 */
</style>

<style scoped>
/* 本地樣式 */
</style>

這種可以解決問題，但是容易搞混淆，將input的樣式寫在全局當然就不合適了

第二種：深度作用選擇器

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

編譯之后

.a[data-v-f3f3eg9] .b { /* ... */ }

但是有一個問題

有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。

    .login-form__item{
        margin-bottom: 20px;
        
        /deep/ .el-input__inner {
            height: 60px;
            background-color:red;
        }
    }

完美解決問題