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