CODEWITHSUNDEEP
javascriptsweetalertsweetalert2
Maxime
Maxime

Reputation: 3

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.

Upvotes: 0

Views: 4557

Answers (2)

Shivam Manswalia
Shivam Manswalia

Reputation: 1323

You can directly use "swall-text" class and give it whatever styling you like.

 .swall-text{
     color: red;
  }

here are the docs not only text, but we can customize everything on the popup modal https://sweetalert.js.org/docs/#theming

Upvotes: 0

Dan Philip Bejoy
Dan Philip Bejoy

Reputation: 4391

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.

Upvotes: 1

Related Questions