初学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>上面这段代码运行后没有任何效果。文章来源：https://www.toymoban.com/news/detail-661008.html
最后查找原因，是因为我的style标签没有带scoped属性导致，样式修改后如下：文章来源地址https://www.toymoban.com/news/detail-661008.html
<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>到了这里，关于vue3 样式穿透:deep不生效的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
