[Element UI] Solve the problem that the custom-class style set in the el-dialog pop-up component does not take effect

Article directory

Problem Description

<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>

Solution

  • Removal scopedRegistration
<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>

Guess you like

Origin blog.csdn.net/qq_45677671/article/details/133646804