Vue3中使用:deep修改element-plus的样式无效怎么办？

前言：当我们用 vue3 :deep() 处理 elementui 中 el-dialog_body和el-dislog__header 的时候样式一直无法生效，遇到这种情况怎么办？

解决办法：

1.直接在 dialog 上面增加class 我试过，也不起作用，最后用这种方法解决的，dialog 外面直接包一层 div
2.将样式单独写一个style标签进行覆盖---此方式由于样式写在外面，可能会影响整个项目的全局样式，--慎重考虑

需求：需要将el-drawer__header的底部的外边距去掉
方式一：
修改前：
在这里插入图片描述修改后：

生效方式：1.在最外层加一层在el-dialog外面包一层

2.主要是vue3中deep会因为最外层没有根节点失效的问题，只需要加一个根节点，deep就有效了
需要注意的是 :deep(这里面只能包一个)

<template><div class="dialog"><el-drawer v-model="drawerDialog" direction="rtl" @close="handleClose" size="50%"><template #header><div class="header"><h4>订单详情----订单编号(23232434343)</h4></div></template><template #default><div class="content"><div class="item-info"><div class="wrap"><div class="top"><div class="left"><div class="line"></div><div class="title">购方信息</div></div><div class="right"><el-button type="primary" plain>编辑</el-button></div></div><div class="info-list"></div></div></div></div></template><template #footer><div style="flex: auto"><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></template></el-drawer></div>
</template><script setup>
import { watchEffect, ref } from 'vue';
const emit = defineEmits(["close"])
const props = defineProps({visible: {type: Boolean,default: false}
})
const drawerDialog = ref(false);//确定的回调函数
const confirm = () => {}//取消的回调函数
const handleClose = () => {drawerDialog.value = false;emit('close');
}watchEffect(() => {if (props.visible) {drawerDialog.value = props.visible;}
})</script><style scoped lang="scss">
.dialog {:deep(.el-drawer__header) {margin: 0;}
}.header {background-color: #fff;height: 40px;
}.content {background-color: #EDEFEE;.item-info {.wrap {.top {display: flex;justify-content: space-between;.left {display: flex;align-items: center;.line {height: 15px;width: 4px;background-color: #07f;}.title {font-size: 16px;font-weight: bold;}}.right {}}.info-list {}}}
}
</style>

方式二：

<template> <el-drawer v-model="drawerDialog" direction="rtl" @close="handleClose" size="50%"><template #header><div class="header"><h4>订单详情----订单编号(23232434343)</h4></div></template><template #default><div class="content"><div class="item-info"><div class="wrap"><div class="top"><div class="left"><div class="line"></div><div class="title">购方信息</div></div><div class="right"><el-button type="primary" plain>编辑</el-button></div></div><div class="info-list"></div></div></div></div></template><template #footer><div style="flex: auto"><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="confirm">确定</el-button></div></template></el-drawer>
</template><script setup>
import { watchEffect, ref } from 'vue';
const emit = defineEmits(["close"])
const props = defineProps({visible: {type: Boolean,default: false}
})
const drawerDialog = ref(false);//确定的回调函数
const confirm = () => {}//取消的回调函数
const handleClose = () => {drawerDialog.value = false;emit('close');
}watchEffect(() => {if (props.visible) {drawerDialog.value = props.visible;}
})</script><style>
.el-drawer__header {margin: 0;
}
</style>
<style scoped lang="scss">.header {background-color: #fff;height: 40px;
}.content {background-color: #EDEFEE;.item-info {.wrap {.top {display: flex;justify-content: space-between;.left {display: flex;align-items: center;.line {height: 15px;width: 4px;background-color: #07f;}.title {font-size: 16px;font-weight: bold;}}.right {}}.info-list {}}}
}
</style>