CSS选择器

插槽选择器

插槽里面的内容样式 需要使用::slotted(类名)

<style lang='less' scoped>
::slotted(.a){
  color: red;
}
</style>

全局选择器

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

动态CSS

const msg = ref('red')
.div{
	color:v-bind(msg)
}

const msg = ref({color:'blue'})
.div{
	color:v-bind('msg.color')
}

CSS module

还有一个 useCssModule 的Hooks

//默认用法
<template>
  <div :class="$style.div"></div>
	<div :class="[$style.div,$style.border]"></div>
</template>
<style module>
.box{ color: red; }
.border{ border:1px solid red; }
</style>

//自定义名字
<template>
  <div :class="my.div"></div>
	<div :class="[my.div,my.border]"></div>
</template>
<style module="my">
.box{ color: red; }
.border{ border:1px solid red; }
</style>