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

相关推荐
庙堂龙吟奈我何5 分钟前
qiankun知识点
前端
SoaringHeart29 分钟前
Flutter封装:原生路由管理极简封装 AppNavigator
前端·flutter
menu33 分钟前
AI给我的建议
前端
张可爱33 分钟前
20251018-JavaScript八股文整理版(上篇)
前端
小小测试开发35 分钟前
Python Arrow库:告别datetime繁琐,优雅处理时间与时区
开发语言·前端·python
自律版Zz37 分钟前
手写 Promise.resolve:从使用场景到实现的完整推导
前端·javascript
golang学习记39 分钟前
从0死磕全栈之Next.js 自定义 Server 指南:何时使用及如何实现
前端
张可爱40 分钟前
从奶茶店悟透 JavaScript:递归、继承、浮点数精度、尾递归全解析(通俗易懂版)
前端
梵得儿SHI1 小时前
Vue 开发环境搭建全指南:从工具准备到项目启动
前端·javascript·vue.js·node.js·pnpm·vue开发环境·nvm版本管理