Настройте кнопки с помощью SweetAlerts 2

Question

Мне нужно соответствовать индивидуальному дизайну, который мне дали.В настоящее время я использую SweetAlerts 2 для всех диалоговых окон с подтверждением и отменой.Мне нужна кнопка отмены, чтобы иметь белый фон, чирный текст и чирокую рамку.Кроме того, границы для обеих кнопок нуждаются в радиусе 25 пикселей.

Я не могу найти какие-либо параметры в документации, которые будут делать эти вещи.Я также не могу найти какие-либо другие ресурсы только для этого.

  // 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);
      }
    });
  }

Мне нужна кнопка отмены, чтобы иметь белый фон, тиловый текст и чирокую рамку.Также границы для обеих кнопок должны иметь радиус 25 пикселей.

РЕДАКТИРОВАТЬ:

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

Answer 1

Вы можете изменить, просто изменив переменные SASS в вашем проекте.

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

Answer 2

Facepalm.Я просто собираюсь использовать диалоги материалов UI

Answer 3

можно проверить кнопку и изменить стиль, переопределив свойства CSS-класса, используя другой стиль

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