关于vue的elementUI和vue3的element-plus的el-dialog的样式以及el-table中的tooltip的样式修改(个人见解)_elementplus 弹出框修改样式

在日常开发中，我发现想要修改elementUI的对话框el-dialog中的样式，比如对话框的头部样式el-dialog__header和底部样式el-dialog__footer修改，可以在当前页面中的style的scoped属性下，只要使用:deep或者>>>或者::v-deep这样的深入选择器进行修改是可以有效的，比如如下样式

:deep(.el-dialog) {
  margin: 80px auto 40px;
  border-radius: 4px;

  .el-form {
    padding-right: 80px;
  }

  .el-dialog__header {
    border-bottom: 1px solid #ddd;
    padding: 16px 24px;
    .el-dialog__title {
      font-size: 16px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      font-size: 16px !important;
    }
  }
  .el-dialog__footer {
    border-top: 1px solid #ddd;
    padding: 10px 16px;
  }
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这样改是有效的，但是你如果是在vue3的element-plus中按照如上的修改方式，你会发现element-plus中的el-dialog的样式是不能生效的，不管你使用怎样的深入选择器都不行，只要有scoped在，所以最后我发现如果想要修改element-plus中的dialog的样式 ，只能去掉scoped，去掉scoped之后，不用深入选择器也可以修改样式，但是如果去掉scoped的话，就会导致其他页面的el-dialog的样式遭到污染，所以这时候你可以在el-dialog中添加一个custom-class=“notice-dialog”，不能直接添加class，添加class，你会发现找不到对应的类名，只能添加custom-class，设置一个独一无二的类名，然后根据这个类名进行样式修改即可，*至于为什么在scoped中，修改样式不生效的原因我也不明白，所以我才把这个记录下来，希望有知道的大佬能告诉我下，谢谢！*因为scoped中的样式不生效，所以我只能在一个页面中添加俩个style，一个没有scoped，一个有scoped，如下所示

<style lang="scss">
.notice-dialog .el-dialog__headerbtn {
  top: 30px;
}
.notice-dialog .el-dialog__header {
  border-bottom: 1px solid #eee;
}
.notice-dialog .el-dialog__body {
  padding: 0px 30px 20px !important;
}
</style>
<style lang="scss" scoped>
.my-header {
  display: flex;
  justify-content: space-between;
}
.has-read {
  margin-right: 30px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

el-dialog是我发现的elementUI和element-plus中不一样的，一个scoped中有效，一个scoped无效的，但是我还发现了另一个不管是elementUI还是element-plus中，再scoped中都是无效的，只能在没有scoped中设置才有效，那就是el-table表格中的内容显示过长使用省略号的tooltip的样式，想要修改这个样式，你只能放在没有scoped中才会生效，至于怎么修改，你们可以找到对应的样式名称，不使用深度选择器也可以直接改，在element-plus中是叫.el-popper，在elementUI中也是叫这个，代码如下

<style lang="scss">
  .el-popper {
  max-width: 1000px !important;
}
</style>
1
2
3
4
5

我发现好像这个tooltip的样式是跟body同一级别的，不知道是不是因为这个原因导致的scoped中不生效的。

以上问题是我再日常开发中遇到的问题，因为不明白其中的道理，所以记录下来，到时候可能会用到，希望这个问题也能帮助到其他人，感谢大家的阅读，同时也希望有大佬能来帮我解释下这个问题，好让我能够彻底的明白！谢谢大佬们的青睐！