vue element-ui 重置樣式問題

1.重置element-ui樣式時，如果我們不加scoped 直接改element樣式會影響到全局其他地方，為解決這個問題，通過查找，找到幾個比較好的改變方式。1

 // 這里我們要注意，想要修改組件樣式的話，必須先用一個原生標簽將這個組件包起來，然后通過父查子的方式來找到組件的類，注意這里的>>>是不可少的，要通過這個來查找

<style scoped>

    .custom-input-container {
        width: 240px;
    }

    .custom-input-container >>> .el-input__inner {
            width: 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 {
        width: $wdith;
        /deep/ .el-input__inner {
            width: $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