一、插槽选择器

1.1 环境搭建

1.1.1 创建插槽

创建 A.vue 页面，向外暴露一个插槽

<template>
    
    <div class="red">我是插槽a</div>
    
    <h2>
        <slot></slot>
    </h2>
</template>

<script setup lang="ts">

</script>

<style scoped>
.red{
    color: red;
}
</style>

1.1.2 使用插槽

<template>

    <A>
        <div class="red">这是插槽内容</div>
    </A>

</template>

<script setup lang='ts'>
import A from "./components/A.vue"

</script>

1.2 使用情景

1.2.1 问题

注意到由于插槽内容是父组件提供的，没有加载到子组件的样式

1.2.2 解决策略

为子组件的样式加上插槽选择器 :slotted(xxx)

:slotted(.red) {
    color: red;
}

二、全局选择器

2.1 问题

如果想定义全局样式，一般是使用如下格式，但是需要额外定义一个style（默认style都加上了scoped）

<style>
.red {
    color: red;
}
</style>

2.2 解决策略

加上全局选择器 :global(xxx)

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

三、动态css

四、css 模块化

4.1 基础使用

<template>
    
    <div :class="[$style.red,$style.border]">我是插槽a</div>

    <h2>
        <slot></slot>
    </h2>
</template>

<script setup lang="ts">

</script>

<style module>

.red{
    color: red;
}

.border{
    border:1px solid
}

</style>

4.2 划分模块

4.3 读取对象

<template>
    
    <div :class="[a.red,a.border]">我是插槽a</div>

    <h2>
        <slot></slot>
    </h2>
</template>

<script setup lang="ts">
import { useCssModule } from 'vue';

const css = useCssModule('a')
console.log(css)

</script>

<style module="a">

.red{
    color: red;
}

.border{
    border:1px solid
}

</style>