插槽选择器 - slotted
// A.vue组件中 - 插槽
// 在A组件中修改class a 的颜色
<template>
<div>
我是插槽
<slot></slot>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
:slotted(.a){
color: red;
}
</style>
// 父组件中传入作用域插槽
<template>
<div>
<A>
<div class="a">私人定制div</div>
</A>
</div>
</template>
全局选择器 - global
第一种:新建一个<style>
标签,不添加scoped
<style>
div{
color:red
}
</style>
<style lang="less" scoped>
</style>
第二种:global
<style lang="less" scoped>
:global(.a){
color: red;
}
</style>
动态CSS
单文件组件的style标签可以通过v-bind (css函数)
将css值关联到动态的组件状态上
字符串
<template>
<div class="css-style">css-style</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const color-red = ref<string>("red");
</script>
<style lang="less" scoped>
.css-style{
color: v-bind(color-red);
}
</style>
对象 - 使用引号
<template>
<div class="css-style">css-style</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const obj= ref({
color: "red"
})
</script>
<style lang="less" scoped>
.css-style{
color: v-bind('obj.color');
}
</style>
css module
<style module>
标签会被编译为CSS Modules,并且将生成的CSS类作为$style
对象的键暴露给组件,$style
是默认名。
<template>
<div :class="$style.red">$style.red</div>
</template>
<style module>
.red{
color: red;
// font-size: 20px;
}
</style>
自定义注入名称,多个可以使用数组
<template>
<div :class="[zxx.red, zxx.border]">$style.red</div>
</template>
<style module="zxx">
.red{
color: red;
// font-size: 20px;
}
.border{
border: 1px solid #000;
}
</style>
与组合式API一起使用
注入的类通过useCssModule
API在setup()
和<script setup>
中使用,对于自定义注入名称的css module模块,在useCssModule
中传递对应的module attribute值作为参数。
使用场景:一般在jsx、tsx和render函数中使用居多。
<template>
<div :class="[zxx.red, zxx.border]">$style.red</div>
</template>
<script setup>
import { useCssModule } from 'vue';
const css = useCssModule('zxx');
</script>
<style module="zxx">
.red{
color: red;
// font-size: 20px;
}
.border{
border: 1px solid #000;
}
</style>