【Vue3】scoped 和样式穿透

我们使用很多 vue 的组件库(element-plus、vant),在修改样式的时候需要进行其他操作才能成功更改样式,此时就用到了样式穿透。

而不能正常更改样式的原因就是 scoped 标记。

scoped 的渲染规则:

js 复制代码
<template>
  <main>
    <el-input
      placeholder="请输入"
      class="ipt"
    ></el-input>
  </main>
</template>

<script setup lang="ts">

</script>

<style scoped lang="less">
.ipt {
  width: 300px;
  margin: 100px 400px;
}

</style>
  1. 给 HTML 的 DOM 节点增加一个不重复的 data 属性,表示它的唯一值。

  2. 编译后的生成的 css 语句,在每句 css 选择器的末尾加一个当前组件的 data 属性选择器来私有化样式。

  3. 如果组件内部包含有其他组件,只会给其他组件的最外层标签加上当前组件的 data 属性。

    此时 App 组件里面包含了 el-input 组件。

这时我们给 input 框加一个背景样式:

css 复制代码
.ipt {
  width: 300px;
  margin: 100px 400px;
  .el-input__inner {
   background: tomato; 
  }
}

此时 scoped 的第二条和第三条之间的矛盾就出现了。

.el-input__inner 里面并没有 data-v-7a7a37b1 属性,导致背景样式失效。

样式穿透解决这个问题:

  1. 如果是 Vue2:

    css 复制代码
    .ipt {
      width: 300px;
      margin: 100px 400px;
      /deep/ .el-input__inner {
       background: tomato; 
      }
    }
  2. 如果是 Vue3:

    css 复制代码
    .ipt {
      width: 300px;
      margin: 100px 400px;
      :deep(.el-input__inner) {
        background: tomato;
      }
    }

问题解决!

相关推荐
贵沫末11 分钟前
React——基础
前端·react.js·前端框架
aklry22 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9329 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子30 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982430 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug33 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo33 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan33 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js