About element ui input, as well as solutions (login page) button styles can not be covered

In doing login screen time, because there is no handwriting html and style, using elementui style, I demand an adaptive page to the screen, so they are all the elements should be written as a percentage of width and height,

This time we need to modify the style element ui of elements,

User name input box is an example of the first thought is to rewrite the input pattern, find the class elements in the page, and then re-write on a style,

as follows:

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

But then written on, the question is how important and I do not take effect added

the reason:

　　Because I wrote scoped in the style pages, vue-load official website has stated after using scoped parent component written in the style will not penetrate into subcomponents go

Referring to the official website address:

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

Screenshot:

 

 Solution:

The first: You can mix style mix of local and global style

You can use both styles have scoped and non scoped in one component:

<style>
 / * Global Style * / 
</ style> 

<style scoped> 
/ * local style * / 
</ style>

This problem can be solved, but easily confused, the input of the writing style of course is inappropriate in a global

The second: the depth of the role of selector

If you want scopedthe style of a selector can act get "deeper", for example influence subassembly, you can use the >>>operator:

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

After compiling

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

But there is a problem

Some can not be resolved correctly as a preprocessor like Sass >>>. In this case you can use /deep/or ::v-deepoperator instead - both >>>alias, can also work.

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

Perfect to solve the problem