如何移除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

<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 2