sweetalert2 更改弹出图标颜色

Question

我正在尝试更改 swal2-error 的 SweetAlert2 弹出图标颜色。

我已经更改了节点包中的变量颜色，并将变量放入我的组件 scss 和全局 scss 文件中，并且它不会改变最糟糕的部分是如果我进入检查元素并更改颜色那里

.swal2-icon.swal2-error {
    border-color: #f27474;
}

它会改变，但再次模仿所有相关文件中的 css 并且没有任何改变，对此的任何帮助将不胜感激。

Answer 1

尝试添加

!important

来覆盖您可能拥有的任何其他颜色定义。

.swal2-icon.swal2-error {
  border-color: #f27474 !important;
}

Answer 2

从 SweetAlert2 的最新版本开始，可以通过使用值

iconColor

来控制图标颜色的选项：

swal.fire({
    title: 'your title',
    icon: 'success',
    iconColor: '#30a702',
    showCloseButton: true
});

Answer 3

它不适用于“成功”图标。在图标动画期间，它最终会以默认（绿色）颜色结束。