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对话框

使用SweetAlerts 2自定义按钮

3 个答案: