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

相关推荐
As33100104 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱12 分钟前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js
OEC小胖胖13 分钟前
Next.js 介绍:为什么选择它来构建你的下一个 Web 应用?
开发语言·前端·web·next.js
切糕师学AI23 分钟前
如何建立针对 .NET Core web 程序的线程池的长期监控
java·前端·.netcore
F2E_Zhangmo3 小时前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip8 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel8 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休9 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪9 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do9 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript