使用了第三方UI组件库后自定义修改样式未生效

原因

首先，就是在编译组件的时候，如果当前组件内style标签上有scoped属性时，就会给当前组件所有标签上添加一个【data-v-hash】属性，且在标签的css选择器的结尾加上和属性同样的字段，起到唯一性的作用，实现类似于"作用域"的作用，那么就使得当前组件内的样式只会作用于当前组件内的元素。

可以使用v-deep相关的知识解决，如下：

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

.a /deep/ .b
.a ::v-deep .b

这样我们只需要注意权重就可以了

ps：但是遇到内联样式仍然会失败，只能使用!import(但是不推荐)，这种目前我能想到的就是使用笨办法在标签里一个个慢慢改