什么是 :global(.test)?
在 Vue3 的 <style scoped> 中,:global() 是用来声明全局样式 的!
意思是:即使你的 <style> 是 scoped 的,:global(.test) 里面的样式也是全局生效的!
✏️ 举个例子
vue
<template>
<div class="test">Hello World</div>
</template>
<style scoped>
:global(.test) {
color: red;
font-size: 24px;
}
</style>
- 这里
.test是 全局的 ,不会被 scope id 限制。 - 页面上任何
.test元素都会被染成红色,不管它在哪个组件里!
🎯 小总结
| 写法 | 意义 |
|---|---|
:deep(.xxx) |
穿透作用域,选到子组件内部 |
:global(.xxx) |
声明全局样式,不加任何 scope id |
⚡ 注意点
:global()里面的选择器是完全裸奔的,全局污染,要小心命名冲突。- 最好配合 BEM 命名 或者加前缀,比如
.myapp-test,避免污染其他地方。
🚀 扩展一下(组合用法)
有时候也可以写局部 global,比如:
css
.button {
:global(.icon) {
margin-right: 8px;
}
}
意思是:.button .icon,但是 .icon 是全局的 class。