vue3项目使用element plus中的el-drawer组件,想自定义.el-drawer__header和.el-drawer__body的样式,使用:deep()为啥不起作用呢?

作者站长头像
站长
· 阅读数 33

vue3项目使用element plus中的el-drawer抽屉组件,想自定义.el-drawer__header和.el-drawer__body的样式,使用:deep()为啥不起作用呢?比如想调整el-drawer抽屉组件的默认标题下外边距及标题字体颜色,和内容区域的默认内边距宽度vue3项目使用element plus中的el-drawer组件,想自定义.el-drawer__header和.el-drawer__body的样式,使用:deep()为啥不起作用呢?代码如下图:vue3项目使用element plus中的el-drawer组件,想自定义.el-drawer__header和.el-drawer__body的样式,使用:deep()为啥不起作用呢?vue3项目使用element plus中的el-drawer组件,想自定义.el-drawer__header和.el-drawer__body的样式,使用:deep()为啥不起作用呢?环境版本如下图:vue3项目使用element plus中的el-drawer组件,想自定义.el-drawer__header和.el-drawer__body的样式,使用:deep()为啥不起作用呢?其他如el-tabs等组件,使用:deep自定义重写样式都是可以的,为啥到了这个el-drawer组件就不行了呢?

回复
1个回答
avatar
test
2024-07-02

这是 Vue 的缺陷。

Scoped style behavior with teleport & fragment

当子组件使用 Teleport 或者 Fragment 时,不会将当前的 scopedId (data-v-xxx) 放置在组件的根元素(或者是 $attr 绑定的元素中)。

所以,当你在父组件使用 scoped css 时,样式不会正确的匹配。

比如父组件声明了:<style scoped>.custom-teleport { xxx }</style>会被编译成:.custom-teleport[data-v-xxx] {xxx}但是,子组件并没有 data-v-xxx 这个属性,因此样式显示错误。

解决方案:

  1. 使用全局样式
  2. 使用 Element Drawer 提供的 Header Slot
<el-drawer v-model="drawer" :direction="direction">
    <template #header>
      <div class="custom-drawer-header">the new header</div>
    </template>
    <span>Hi, there!</span>
</el-drawer>
  1. 给 ElementUI 提 PR,修改 Drawer 组件的代码,在 Drawer 根元素上绑定 data-v-xxx 属性。参考代码:
<!-- CustomTeleport.vue -->
<script lang="ts" setup>
import { getCurrentInstance } from 'vue';

const scopedId = getCurrentInstance()?.vnode.scopeId || ''
</script>

<template>
  <Teleport to="body" :disabled="true">
    <div v-bind="$attrs" :[scopedId]="''">
        CustomTeleport
    </div>
  </Teleport>
</template>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容