Vue3对话框样式修改不了

🔥🔥🔥欢迎关注csdn前端领域博主: 前端小王hs

🔥🔥🔥email: 337674757@qq.com

🔥🔥🔥前端交流群： 598778642

今天还是说说Vue3引用elementplus组件的问题，今天想说的是设置对话框样式的问题，即如何去修改对话框的样式，特别是在已经全局定义了对话框的样式的情况下怎么去修改组件内的对话框样式

两个条件

①全局定义了对话框的样式
②在局部定义对话框的样式

问题出发点

在项目开发的过程中，为了规范代码和统一组件的样式，通常会在全局定义整套的样式，使得项目在展现给客户的时候有统一规范高效易理解的效果

修改过程

在引入的时候（直接复制elementplus内的dialog），发现引入的对话框内容中带有两条横杠，后来发现是之前在全局中定义了对话框的样式
所以出现如下的效果：

然后通过F12查找样式，发现出现了如下的属性

由前面几篇博文知道，我们可以通过::v-deep样式穿透或者:deep()深度选择器去修改，但有同学就发现怎么都修改不了，便跟博主发来了文件，其实原因很简单，因为对话框在出现时是属于body的

也就是说，在css中，不能把:deep()放在任何的父选择器下面，不然都会出现修改不了的情况

正确的修改就是

<style lang="scss" scoped>
	:deep(.el-dialog__footer ) {
		border: 0;
	}
	:deep(.el-dialog__body) {
		border: 0;
	}
<style>
1
2
3
4
5
6
7
8

如在前端开发中有任何问题，可私聊博主