vue element-ui 重置样式问题

1.重置element-ui样式时，如果我们不加scoped 直接改element样式会影响到全局其他地方，为解决这个问题，通过查找，找到几个比较好的改变方式。1

 // 这里我们要注意，想要修改组件样式的话，必须先用一个原生标签将这个组件包起来，然后通过父查子的方式来找到组件的类，注意这里的>>>是不可少的，要通过这个来查找

<style scoped>

    .custom-input-container {
         240px;
    }

    .custom-input-container >>> .el-input__inner {
             240px;
            height: 30px;
    }
    .custom-input-container >>> .el-input__inner:focus {
            border-color: #2E8AF1;
            border-color: red;
    }
</style>

2.使用scss/less的方式，加入 /deep/ 通过less以及sass的方式来实现穿透

<style lang="scss" scoped>
    $wdith: 240px;
    $height: 30px;

    .custom-input-container {
         $wdith;
        /deep/ .el-input__inner {
             $wdith;
            height: $height;
        }
        /deep/ .el-input__inner:focus {
            // border-color: #2E8AF1;
            border-color: red;
        }
    }
</style>

这种方法谷歌会提示被移除：element-ui.common.js?5c96:9109 [Deprecation] /deep/ combinator is no longer supported in CSS dynamic profile.It is now effectively no-op, acting as if it were a descendant combinator. /deep/ combinator will be removed, and will be invalid at M65. You should remove it. See https://www.chromestatus.com/features/4964279606312960 for more details.

来自互联网参考：https://www.cnblogs.com/inkwind/p/11316313.html