elementui default are several ways to modify styles

elementui modify the default style of problem

When we introduce a third party component libraries in the vue, vue style scoped component will be our modifications hinder style, there are three ways to modify the style, and does not affect the overall style:
1 to add a new style out of style do not add scoped

<style>
    .my{
        margin: 20px;
    }
    .my .el-input__inner{
        border-radius: 15px;/* 这个样式起效果 */
    }
</style>
<style scoped>
    .my .el-input__inner{
        border-radius: 30px; /* 这个样式不起效果 */
    }
</style>

2 Use deep penetrating style

<style scoped>
    .my .el-input__inner{
        border-radius: 30px;/* 这个不起作用 */
    }
    .my /deep/ .el-input__inner{
        border-radius: 30px;/* 这个起作用 */
    }
</style>

3 Use >>> penetration

<style scoped>
    .my .el-input__inner{
        border-radius: 30px;/* 这个不起作用 */
    }
    .my >>> .el-input__inner{
        border-radius: 30px;/* 这些起作用 */
        border: 1px solid #eceef2;
        outline: 0;
    }
</style>

4 Some style inline style is relatively high weight you need to use the above methods can be modified to ensure that the style and add on! Important to increase the weight

<el-input v-model="input" placeholder="请输入内容" style="width: 300px;"></el-input>
<style scoped>
    .my >>> .el-input__inner{
        border-radius: 30px;
        border: 1px solid #eceef2;
        outline: 0;
        width: 400px!important;
    }
</style>

Such is 400px width of the input box