Element中ElMessageBox弹框内容及按钮样式自定义

需求背景：

1. 要求展示文本内容红色字体突出展示
2. 要求按钮为红色背景

代码实现如下：

<template><el-button plain @click="open">Click to open the Message Box</el-button></template><script lang="ts" setup>import { ElMessage, ElMessageBox } from 'element-plus'const open = () => {ElMessageBox.confirm('设置<span style="color: #f40;">确认按钮</span>的颜色. Continue?','Warning',{confirmButtonText: '确认',cancelButtonText: '取消',type: 'warning',confirmButtonClass: 'el-button--danger',// 可以用element自带的，也可以完全自定义dangerouslyUseHTMLString: true,}).then(() => {ElMessage({type: 'success',message: 'Delete completed',})}).catch(() => {ElMessage({type: 'info',message: 'Delete canceled',})})
}</script>

第一个要求：

dangerouslyUseHTMLString: true

设置完该属性后，可以在需要自定义样式的文本上使用标签样式实现

第二个要求：

第一种：element可以满足的样式，可以直接使用,如代码实现中

第二种：完全自定义样式，通过在style标签实现，切记不可带scoped，由于scoped属性的限制导致不生效。

confirmButtonClass: ‘custom-style’

<style lang="scss">.custom-style {/* 自定义样式 */}
</style>

实现效果如下：