初学vue3，今天需要修改el-input组件的属性（去掉border和文字居右）

网上搜了一下，大致都是采用:deep 样式穿透来修改el-input的属性
 

<div class="input-container">
                    <el-input placeholder="请输入111"/>
                </div>

<style>
    .input-container :deep(.el-input__wrapper) {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0;
}

.input-container :deep(.el-input__inner) {
        text-align: right;
    }
</style>

上面这段代码运行后没有任何效果。

最后查找原因，是因为我的style标签没有带scoped属性导致，样式修改后如下：

<style scoped>

.input-container :deep(.el-input__wrapper) {
    background-color: #FFFFFF;
    box-shadow: 0 0 0 0;
}

.input-container :deep(.el-input__inner) {
        text-align: right;
    }

</style>