关于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;
        }
    }

完美解决问题