vue3 style 标签加 scoped 导致样式失效

前言

今天在给自己开发的网站写用户手册时，发现页面的某个样式不起效果，原来是有效果的。经过一番排查，发现是在 style 标签加上 scoped 导致的。
style 标签上加 scoped 表示当前样式只用于该组件，不会污染别的组件

style 标签没加 scoped 前

// 部分代码展示
<style>
.el-input.error_val .el-input__wrapper {
    background-color: red;
}
</style>

没有问题，正确显示，错的就应该标红

style 标签加 scoped 后

// 部分代码展示
<style scoped>
.el-input.error_val .el-input__wrapper {
    background-color: red;
}
</style>

样式失效了，错误的值没有被标红

解决

使用深度作用选择器：>>> 或 :deep()

// 部分代码展示
<style scoped>
.el-input.error_val >>> .el-input__wrapper {
    background-color: red;
}

// 或者

.el-input.error_val :deep() .el-input__wrapper {
    background-color: red;
}
</style>

样式重新生效

总结

style 标签上加 scoped 表示当前样式只用于该组件，不会污染别的组件，同时也不会作用于子组件的内部，想修改子组件内部的样式请使用深度作用选择器：>>>、:deep() 等
若有不足，欢迎指出，开发之路，与君共勉！