Vue 小技巧 —— :global 伪元素

Vue 技巧

在写组件时，定义样式一般会加入 scoped 属性，这样定义的样式只在组件内部生效，不会干扰到其它组件，起到样式隔离的作用。
特殊情况下，希望某个样式能够全局生效，该如何处理呢？

我之前有两种办法：

1. 是去除 scoped 属性，然后利用 scss 的能力去控制样式隔离。
2. 或是新增一个不带 scoped 属性的 <style>.

后来发现，一个更简洁的技巧是利用 :global 伪元素即可：

<style scoped>
:global(.red) {
  color: red;
}
</style>