css穿透样式:deep的用法

在前端开发中,尤其是使用 Vue.js 这样的框架时,有时我们需要在子组件中修改或影响由父组件传递下来的样式。然而,由于组件的封装和样式隔离,直接修改子组件中的样式可能不起作用。这时,我们可以使用 ::v-deep 伪元素来实现深度选择,也叫做深度穿透。

在 Vue 3 中,我们可以使用 ::v-deep 来替代 Vue 2 中的 >>> 或 ::v-deep (在单文件组件的 <style scoped> 中)。::v-deep 允许我们选择子组件中的深层嵌套元素,并应用样式。

例如,假设你有一个父组件:

<template>

<div class="parent-class">

<ChildComponent />

</div>

</template>

<style scoped>

.parent-class {

color: blue;

}

</style>

子组件有一个内部元素,你想要从父组件中修改它的样式:

<template>

<div>

<span class="child-element">子组件</span>

</div>

</template>

<style scoped>

.child-element {

color: red; /* 默认样式 */

}

</style>

如果你想从父组件中改变这个子元素的颜色,你可以使用 :deep

<template>

<div class="parent-class">

<ChildComponent />

</div>

</template>

<style scoped>

:deep(.parent-class .child-element) { /* 父组件的样式 子组件的样式*/

color: green; /* 修改子组件中的样式 */

}

</style>

html 复制代码
<style lang="scss" scoped>
   :deep(.n-drawer) {
   
       &.n-drawer--bottom-placement .n-drawer__resize-trigger {
            top: 38px;
            z-index: 9;
       }

       .n-drawer-body-content-wrapper {
            padding: 0;
       }
   }

   :deep(.s-page .s-page-header) {
        margin-bottom: 30px;
   }

</style>

在实际代码开发中,可能嵌套的层次非常的复杂

可以通过F12 的【Elements】 来进行元素快速定位

需要注意的是,:deep 只能用于 <style scoped> 中,它不能用于全局样式或组件外的样式。

此外,过度使用 :deep 可能会导致样式难以维护,因此建议只在必要时使用它。在大多数情况下,更好的做法是通过 props 传递样式或类名,以保持组件的封装性和可复用性。

相关推荐
我要洋人死2 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人13 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人14 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR19 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香21 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969324 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai29 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91538 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#