element中MessageBox 组件 弹框 怎么改里面的icon 的图标颜色

如果你是在使用 Vue.js 开发 Web 应用程序，并且使用了 Element UI 中的 MessageBox 组件来创建弹框，那么你可以通过在组件中使用自定义样式来改变 MessageBox 中的图标颜色。

在 Element UI 的官方文档中，我们可以看到 MessageBox 组件的默认样式中使用了一个名为 `el-icon-circle-check` 的 CSS 类来渲染图标。因此，我们可以在自己的样式表中重写这个类，以改变图标的颜色。

以下是一个示例代码，展示了如何使用自定义样式来改变 MessageBox 中图标的颜色：

<template>
  <div>
    <el-button @click="showDialog">显示弹框</el-button>
  </div>
</template>

<style>
/* 重写 el-icon-circle-check 类 */
.el-message-box__status .el-icon-circle-check {
  color: red !important;
}
</style>

<script>
import { MessageBox } from 'element-ui';

export default {
  methods: {
    showDialog() {
      MessageBox.alert('这是一条消息', '标题', {
        confirmButtonText: '确定',
        type: 'success'
      });
    }
  }
}
</script>

在上面的代码中，我们首先在样式表中重写了 `el-icon-circle-check` 类，并将其颜色属性设置为红色。然后在组件的 `methods` 中，我们使用 `MessageBox` 的 `alert` 方法来创建一个弹框，并传递了一个名为 `type` 的属性，用于指定图标类型。在这里，我们将其设置为 `success`，表示使用默认的成功图标。当弹框显示时，我们可以看到图标的颜色已被改变为红色。

请注意，由于我们使用了 `!important` 关键字，所以需要确保我们的样式表的优先级高于 Element UI 的样式表，以防止其被覆盖。