【Element UI】解决 el-dialog 弹框组件设置 custom-class 样式不生效问题

问题描述

<template><el-dialog class="myDialog" v-model="show" title="弹窗" custom-class="customDialog"><div>弹窗内容</div></el-dialog>
</template>
<script>// 省略。。。。
</script>
<style lang="less" scoped>
/* 此次设置弹窗高度并不生效 */
.customDialog> .el-dialog__body {height: 85vh;
}
</style>

解决方法

• 去除scoped标识

<template><el-dialog class="myDialog" v-model="show" title="弹窗" custom-class="customDialog"><div>弹窗内容</div></el-dialog>
</template>
<script>// 省略。。。。
</script>
<style lang="less" scoped>
/* 此次设置弹窗高度并不生效 */
.customDialog> .el-dialog__body {height: 85vh;
}
</style>
<style lang="less">
/* 正常生效 */
.customDialog> .el-dialog__body {height: 85vh;
}
</style>