Search code examples
javascriptsweetalertsweetalert2

SweetAlert2 - How to change title and text color?

I would like to change title and text color in SweetAlert2.

My alerte :

Swal.fire({
  icon: 'warning',
  title: 'Attention...',
  text: 'Change color of this text',
  background: '#1e2122',
  confirmButtonColor: '#ff6600',
  confirmButtonText: 'OK',
  iconColor: '#ff6600',
})

I have seen this topic but not work for me.

it is necessary to use customClass ?

Could you help me please ? :)

Thanks.

Solution

  • Try using customClass in the SWAL configuration to give a custom class name to the title or the container and provide the text color in that class.

    SWAL customClass Configuration

    Your configuration when you invoke SWAL should contain the customClass key with value like

    customClass: {
    title: 'custom-title-class',
  }

    On your root CSS file

    .custom-title-class {
  color: green;
}

    Similarly other styles can also be overridden using their respective entries.