vue3之css插槽选择器、全局选择器以及动态css

插槽选择器

默认情况下，作用域样式不会影响到 < slot /> 渲染出来的内容，因为它们被认为是父组件所持有并传递进来的

解决方案 ：slotted

<!-- A组件 -->
<template>
    <div>
        我是A组件插槽
        <slot></slot>
    </div>
</template>
 
<script setup>
</script>
 
<style scoped>
 :slotted(.a) {	// 插槽中clase='a'的标签字体为红色
	color: red
}
</style>

<!-- 父组件 -->
<template>
    <A>
        <div class='a'>我是红色</div>
        <div>我不是红色</div>
    </A>
</template>

全局选择器

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

解决方案 ：global

<style>
 div{
     color:red
 }
</style>
 
<style lang="less" scoped>
 
</style>

等同于

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

动态CSS

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

<template>
    <div class="a">
       动态css
    </div>
</template>
 
<script lang="ts" setup>
import { ref } from 'vue'
const red = ref<string>('red')
</script>
 
<style lang="less" scoped>
.a{
   color:v-bind(red)
}
 
</style>

如果是对象请加引号

 <template>
    <div class="a">
        我是动态CSS,我会变色
    </div>
</template>
 
<script lang="ts" setup>
import { ref } from "vue"
const colors= ref({
    color:'red'
})
setTimeout(()=>{
  colors.value.color = 'green'
},2000)
</script>

<style lang="less" scoped>
.a{
	color: v-bind('colors.color');
}
</style>