vue3 - 如何移除el-drawer的header上的margin-bottom?

Question

如何移除el-drawer的header上的margin-bottom?在<style scoped>的情况下。

• 为什么我按下面的方式修改不会成功呢?

  <script setup lang="ts">import { ref, version as vueVersion } from 'vue'import { version as epVersion } from 'element-plus'import { ElementPlus } from '@element-plus/icons-vue'const drawer = ref(false);</script><template><el-button @click="drawer = true">open drawer</el-button><el-drawer v-model="drawer" class="remove-el-drawer-header-margin-bottom">  <template #header>    <p>你好，世界!</p>  </template>  <p>大家好!!!!!!</p></el-drawer></template><style scoped>.remove-el-drawer-header-margin-bottom .el-drawer__header {  margin-bottom: 0;}</style>

element plus playground

Answer 1

Answer 2

<template>  <div>    <el-button @click="drawer = true">open drawer</el-button>    <el-drawer v-model="drawer" class="remove-el-drawer-header-margin-bottom">      <template #header>        <p>你好，世界!</p>      </template>      <p>大家好!!!!!!</p>    </el-drawer>  </div></template><style scoped>:deep(.remove-el-drawer-header-margin-bottom) .el-drawer__header {  margin-bottom: 0;}</style>

Answer 3

你提供的代码本身是正确的，它应该能够移除 el-drawer 的 header 上的 margin-bottom。如果你发现它没有生效，可能有几个原因：

1. Element Plus 的版本问题：确保你正在使用的 Element Plus 版本支持 .el-drawer__header 这个选择器。不同版本之间可能存在差异。
2. 样式优先级问题：有可能其他地方的样式（可能是全局样式或者是更高优先级的样式）覆盖了你的 .remove-el-drawer-header-margin-bottom .el-drawer__header 样式。你可以通过浏览器的开发者工具检查元素的实际应用样式，看看是否有其他样式被应用。
3. CSS 选择器问题：确认 .el-drawer__header 是否是你要修改的元素的正确选择器。有时候，由于框架的更新或自定义，选择器可能会发生变化。
4. Vue 组件的样式隔离：<style scoped> 确保了样式只应用于当前组件。确保没有其他组件或全局样式影响到了 el-drawer 的 header。
5. 缓存或构建问题：有时候，浏览器缓存或构建工具缓存可能导致你看到的不是最新的样式。尝试清除缓存或重新构建项目。
6. 检查 Vue 组件的层次结构：确保你的 .remove-el-drawer-header-margin-bottom 类确实应用到了 el-drawer 组件上，并且 el-drawer__header 是 el-drawer 组件内部 header 的正确类名。

如果上述都确认无误，但问题仍然存在，可以尝试使用更具体的选择器或添加 !important 来强制覆盖其他样式（尽管通常不推荐使用 !important，因为它会使样式难以维护）：

<style scoped>  .remove-el-drawer-header-margin-bottom .el-drawer__header {    margin-bottom: 0 !important;  }</style>

但是，最佳实践是尽量避免使用 !important，而是通过调整选择器的优先级或使用更具体的选择器来解决问题。如果可能，还可以考虑使用 CSS Modules 或其他 CSS-in-JS 库来更好地管理组件样式。