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 传递样式或类名,以保持组件的封装性和可复用性。

相关推荐
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止6 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms6 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登6 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in7 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4168 小时前
HTML面试题
前端·html
张可8 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课9 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿10 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl
然我10 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法