vue3样式穿透用法

在Vue3中,样式穿透可通过以下方式实现:

1. 基础用法

使用::v-deep伪类实现样式穿透(兼容Vue2语法):

css 复制代码
.parent ::v-deep .child-component {
  color: red;
}

2. 推荐方式

使用:deep()伪函数(Vue3推荐写法):

css 复制代码
.parent :deep(.child-component-inner) {
  padding: 10px;
}

3. 插槽内容样式

使用:slotted()处理插槽内容:

css 复制代码
:slotted(.slot-content) {
  background: #f0f0f0;
}

4. 全局样式

在scoped样式中定义全局规则:

css 复制代码
:global(.global-class) {
  font-size: 16px;
}

5. 动态选择器

结合属性选择器使用:

css 复制代码
:deep([data-test="item"]) {
  border: 1px solid blue;
}

使用场景示例

vue 复制代码
<template>
  <el-dialog>
    <div class="custom-content">需要定制的弹窗内容</div>
  </el-dialog>
</template>

<style scoped>
/* 修改Element Plus弹窗标题 */
:deep(.el-dialog__header) {
  background: #409eff;
}

/* 定制插槽内容样式 */
:slotted(.custom-content) {
  font-weight: bold;
}
</style>

注意事项

  1. 优先考虑组件props/custom class设计
  2. 避免过度使用样式穿透
  3. 注意样式优先级问题
  4. 使用scoped限定作用域
  5. 在Vue3中已废弃/deep/>>>语法

推荐结合CSS变量使用更灵活的样式定制方案:

css 复制代码
:deep(.child-component) {
  --theme-color: #42b983;
  color: var(--theme-color);
}
相关推荐
龙在天3 分钟前
npm run dev 做了什么❓小白也能看懂
前端
hellokai1 小时前
React Native新架构源码分析
android·前端·react native
li理1 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真1 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere1 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端
wifi歪f2 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
1024小神2 小时前
如何快速copy复制一个网站,或是将网站本地静态化访问
前端
掘金一周2 小时前
DeepSeek删豆包冲上热搜,大模型世子之争演都不演了 | 掘金一周 8.28
前端·人工智能·后端
moyu842 小时前
前端存储三剑客:Cookie、LocalStorage 与 SessionStorage 全方位解析
前端
不爱说话郭德纲2 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化