Scoped和样式穿透
一般我们写组件，给每个组件写样式的时候都会加上scope，scope的作用就是在dom结构以及css样式上添加一个唯一的data-v-hash的标记（这个过程是由PostCSS转化实现的），进而实现样式私有化
但是对于修改Element ui 的样式，当我们在加上Scoped 直接修改是不能修改成功的，这就是PostCSS在转化的时候，把元素选择器放在了最后，为了解决这一问题，我们就要使用样式穿透，:deep() ，作用就是修改 属性选择器的位置
<style scoped>
:deep(input){
}
</style>
此外还有两个选择器：
插槽选择器
我们可以使用插槽选择器修改父级的传过来的样式
A 组件定义一个插槽
<template>
<div>
我是插槽
<slot></slot>
</div>
</template>
<script>
export default {}
</script>
<style scoped>
</style>
在App.vue 引入
<template>
<div>
<A>
<div class="a">私人定制div</div>
</A>
</div>
</template>
<script setup>
import A from "@/components/A.vue"
</script>
<style lang="less" scoped>
</style>
使用插槽选择器在A组件修改class a 的颜色
<style scoped>
:slotted(.a) {
color:red
}
</style>
全局选择器
在之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案
<style lang="less" scoped>
:global(div){
color:red
}
</style>
动态 CSS
单文件组件的
<template>
<div class="div">
小满是个弟弟
</div>
</template>
<style lang="less" scoped>
.div{
color:v-bind(red)
}
如果是对象 v-bind 请加引号
<script lang="ts" setup>
import { ref } from "vue"
const red = ref({
color:'pink'
})
</script>
<style lang="less" scoped>
.div {
color: v-bind('red.color');
}
</style>
|