Vue项目中如何覆盖已安装第三方组件包的原有CSS样式

问题原因 #

你当前样式不生效是因为Vue的scoped样式机制导致的：开启scoped后，Vue会给当前业务组件的所有DOM元素添加唯一的自定义属性（比如data-v-xxxxxx），样式规则也会自动加上该属性前缀做限定，仅作用于当前组件的元素。
而第三方组件vue-typewriter内部的.typewriter-msg属于子组件的内部元素，不会携带父业务组件的自定义属性，因此你在scoped样式块中写的.typewriter-msg规则无法匹配到该元素。

最优解决方案 #

使用Vue提供的深度选择器修改子组件内部样式，不需要移除scoped，也不会污染全局样式，仅作用于当前业务组件内的typewriter实例：
如果是Vue3环境，写法如下：

<style lang="scss" scoped>
.msg {
  font-size: 1.9em;
  font-weight: bolder;
}
/* 深度选择器命中子组件内部类 */
:deep(.typewriter-msg) {
  color: #ff0048;
  border-bottom: 2px solid red;
  font-weight: 600;
}
</style>

如果是Vue2 + 预处理器（Scss/Less）环境，将:deep替换为::v-deep即可；如果用原生CSS，使用>>>符号。

备选方案 #

你也可以新增一个不带scoped的样式块，通过父类限定作用范围避免全局污染：

<!-- 原有scoped样式块保留 -->
<style lang="scss" scoped>
.msg {
  font-size: 1.9em;
  font-weight: bolder;
}
</style>
<!-- 新增非scoped样式块，加父类限定 -->
<style lang="scss">
.msg .typewriter-msg {
  color: #ff0048;
  border-bottom: 2px solid red;
  font-weight: 600;
}
</style>

该方案兼容性更强，但写法不如深度选择器简洁，优先推荐使用深度选择器方案。

内容的提问来源于stack exchange，提问作者Lutaaya Huzaifah Idris