vue3更改.el-dialog__header样式不生效

需求：想要在标题下方加一个横线用于区分下方内容，但是使用:deep，但是并不生效

:deep(.el-dialog__header) {
		border-bottom: 1px solid #ccc !important;
	}

解决方案：

在<el-dialog>上方在包一层div，然后设置样式，就可以了，代码如下：

HTML部分：

<div class="dialog">
		<el-dialog :model-value="visible" title="物料详情" width="40%" @close="$emit('close')">
			<div v-if="row" class="flexDivBox">
				<div v-for="(item, index) in datalabel" class="flexDivBox_flexBox" :key="index">
					<div>{{ item.label }}：</div>
					<div>{{ datas[item.name] }}</div>
				</div>
			</div>
		</el-dialog>
	</div>

CSS部分：

.dialog {
	:deep(.el-dialog__header) {
		border-bottom: 1px solid #ccc !important;
	}
}