Vue学习记录之十七 css中样式穿透及新特征介绍

一、scoped原理

在vue页面的css中，有一个设置为scoped，使用以后dom的节点会出现下面的规则。其实我们打完包就是一个html页面，如果不做处理，将会导致css混乱。

1. 给HTML的DOM节点加一个不重复data属性(形如:data-v-123)来表示他的唯一性
2. 在每句css选择器的末尾(编译后的生成的css语句)加一个当前组件的data属性选择器(如[data-v-123])来私有化样式
3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的data属性

我们在vite框架中，引入element-plus组件，在App.vue中，输入下面代码：

<template>
    <main>
      <el-input placeholder="测试代码" class="ipt"></el-input>
    </main>
</template>
<script setup lang='ts'>
import {
      ref,reactive } from 'vue'
</script>
<style scoped lang="less">
.ipt{
     
  width: 300px;
  margin: 100px 400px;
}
</style>

样式就会出现id或class[随机data编码]


通过上图，我们如果要修改 el-input__inner的颜色

.ipt{
   
  width: 300px;
  margin: 100px 400px;
  .el-input__inner{
   
    background: red;
  }
}

运行代码，发现没有变颜色，我们看看源代码

他后面跟的是[data-v-7a7a37b1], 但是源码后面没有data属性，导致无法识别。解决方法，见下面样式穿透。

二、样式穿透

有一些vue常用的组件库，某些样式无法满足我们的需求，需要进行改动，这时就需要用到样式穿透。上面我们无法修改背景颜色，可以使用deep函数来解决，也就是样式穿透。

.ipt{
   
  width: 300px;
  margin: 100px 400px;
  //这里deep是个函数，参数就是选择器，后面的内容就是样式。
  //作用是将属性选择器前移到父级后面，这个父级是.ipt。
  :deep(.el-input__inner){
   
    background: red;
  }
}