使用的vue3，在封装组件时，因为我们使用的elmentui-plus组件，我今天封装一个dialog的内容，想更改dialog弹窗内容区域的样式，结果我使用:deep进行样式渗透，但怎么写都不管用，其他页面是管用的。

代码如下：

<template>

<Dialog
:model-value="props.visible"
width="80%"
max-height="600px"
:fullscreen="false"
:close-on-click-modal="false"
class="dialog-container"
>

    <template #title>
    		<div class="dialog-title">标题</div>
    </template>

    <div class="dialog-content"></div>

</Dialog>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { propTypes } from '@/utils/propTypes'
const props = defineProps({
visible: propTypes.bool.def(false)
})

</script>

<style scoped lang="scss">
.dialog-container {
box-sizing: border-box;
}

.dialog-content {
border:1px solid re;
}

// 把padding重制了
:deep(div.el-dialog__body) {
padding: 0 !important;
}

</style>

从图中可以看出，红色边框就是内容区，结果设置的padding不管用。

我把专门在父元素加class，也不管用。

:deep(.dialog-content div.el-dialog__body) {
padding: 0 !important;
}

但是我把样式定义写到scope之外是有效果的。

// 不加scope
<style lang="scss">
// 把padding重制了
:deep(div.el-dialog__body) {
padding: 0 !important;
}
</style>

但是我不想这么写，因为在其他页面我使用:deep是起作用的。

百思不得其解，在网上查了一下，有人说，:deep对组件必须有一个根节点才管用。就是template下的元素必须放在一个元素中，vue2通常这么要求，vue3不放也不报错。

但是我代码就是在一个元素中，但我的元素是第三方组件，不是原生的元素，抱着试试态度，我在<Dialog>外面加了一层div

<template>
// 加一层div
<div>

    <Dialog
    :model-value="props.visible"
    width="80%"
    max-height="600px"
    :fullscreen="false"
    :close-on-click-modal="false"
    class="dialog-container"
    >
        <template #title>
        <div class="dialog-title">标题</div>
        </template>
        <div class="dialog-content"></div>
    </Dialog>

</div>
</template>

我擦，管用了！！！

解决方法

给组件加上根节点，如果根节点不是原生的元素，则需要使用原生元素包一下。