vue3 样式穿透:deep不生效

初学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>