vue3 :deep() :slotted() :global() css动态绑定变量

scoped 原理：vue中的scoped 通过在DOM结构以及css样式上加唯一不重复的标记:data-v-hash的方式，以保证唯一（而这个工作是由过 PostCSS 转译实现的），达到样式私有化模块化的目的。

项目开发中因为ui设计常常需要修改vue常用的组件库（element，antD等等）, 这就需要用到样式穿透

Vue 提供了样式穿透:deep()

<style scoped>
 :deep(.box) {
    
    
    color:blue
}
</style>

还有一种情形是如何去修改插槽过来的组件的样式：这就需要用到:slotted()

<style scoped>
 :slotted(.box) {
    
    
    color:blue
}
</style>

在之前我们想加入全局样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案

<style lang="less" scoped>
:global(.box){
    
    
    color:red
}
</style>

动态css:单文件组件的标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上：

<template>
    <div class="box1">
       
    </div>
     <div class="box2">
       
    </div>
</template>
 
<script lang="ts" setup>
import {
    
     ref } from 'vue'
const box1Color = ref<string>('red')
const box2Color = ref({
    
    
    color:'pink'
})
</script>
 
<style lang="less" scoped>
// 绑定字符串
.box1{
    
    
   color:v-bind(box1Color)
}
// 绑定对象
.box2{
    
    
	color:v-bind('box2Color.color')
}
</style>