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

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程