vue element-ui 重置样式问题

转载

mb61c7285216674 2022-01-14 17:13:59

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.