element给dialog设置自定义样式_element-plus el-diolog位置样式

给element的dialog设置自定义样式的时候发现给dialog增加了class但是不生效，设置样式属性不生效

<template>
 <el-dialog v-model="visible" title="微信" width="300px" align-center class="dialog" >
      <img src="../assets/wechat.jpeg" class="img" />
    </el-dialog>
</template>
<style scoped>
.dialog .el-dialog__body {
  padding-top: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10

方案一

stlye的scoped去掉就可以了，如果不想去掉的话。可以在这个文件下面建立一个新的style标签。

<style scoped></style>
<style>
.dialog .el-dialog__body {
  padding-top: 10px;
}
</style>
1
2
3
4
5
6

方案二

新增一个css文件，在全局引入，讲dialog的class名称写的比较唯一。然后用来设置一些自定义的样式。