使用SweetAlerts 2自定义按钮

Question

我需要匹配给我的定制设计。我目前正在使用SweetAlerts 2进行所有对话框的确认和取消。我需要取消按钮，以白色背景和青色彩色文字和蓝绿色边框。两个按钮的边界也需要半径为25px。

我在文档中找不到任何可以执行这些操作的参数。我也找不到任何其他资源来完成此任务。

  // Delete click
  handleDeleteClick = () => {
    // Warning alert before delete
    Swal({
      title: 'Are you sure you want to delete this item?',
      type: 'warning',
      reverseButtons: true,
      showCancelButton: true,
      confirmButtonColor: '#4DB6AC',
      cancelButtonColor: 'white',
      confirmButtonText: 'Delete',
    }).then((result) => {
      if (result.value) {
        // Delete task
        axios.delete(`/api/goals/tasks/${this.props.task.id}`)
          .then(this.handleDeleteClickSuccess)
          .catch(this.handleDeleteClickError);
      }
    });
  }

我需要取消按钮，以白色背景和青色彩色文字和蓝绿色边框。两个按钮的边界也需要半径为25px。

编辑：

/* Material UI styling */
const styles = theme => ({
  heading: {
    backgroundColor: '#E3E3E3',
    border: '1px solid #cccccc',
  },
  buttonsRight: {
    justifyContent: 'flex-end',
  },
});

Answer 1

可以通过使用其他样式覆盖CSS类的属性来检查按钮并更改样式

.swal-button--cancel {
  // your css
}

Answer 2

您可以更改只需更改项目中的SASS变量。

https://github.com/sweetalert2/sweetalert2/blob/master/src/variables.scss

Answer 3

捂脸。我将使用材料ui对话框