使用:deep(穿透的class名或者id名)（同时修改的样式最好加上!important放在原来的element样式权重较高，使自己设置的样式不生效）
例如
:deep(.el-input-group__append) {
min-height: 0px;
padding: 0 10px;
}
:deep(.el-input-group__append) {
right: 1px !important;
top: 2px !important;
box-shadow: none !important;
}
有时候穿透样式层级太深的话需要在前面加上一个父级的名称（同时修改的样式最好加上!important放在原来的element样式权重较高，使自己设置的样式不生效）
例如
.selet-province :deep(input::-webkit-input-placeholder) {
-webkit-text-fill-color: rgba(255, 255, 255) !important;
}
.search-input :deep(input::-webkit-input-placeholder) {
font-size: 18px;
-webkit-text-fill-color: #000 !important;
color: #000 !important;
}
最后如果还是穿透不了的话可以考虑放在app.vue上，不过这样子的话之后再其他的页面使用的话就会被之前设置的样式影响到，如果之后不在用这个组件的话可以考虑写再这上面（同时修改的样式最好加上!important放在原来的element样式权重较高，使自己设置的样式不生效）
本文转载自: https://blog.csdn.net/weixin_44634901/article/details/128249478
版权归原作者 weixin_44634901 所有， 如有侵权，请联系我们删除。
版权归原作者 weixin_44634901 所有， 如有侵权，请联系我们删除。