GA-MO / react-confirm-alert

react component confirm dialog.
https://ga-mo.github.io/react-confirm-alert/demo/
MIT License
273 stars 105 forks source link

How I can center in my display #44

Open christiantigre opened 4 years ago

christiantigre commented 4 years ago

hi, how I can apply style in my component. I try, style: "center"

closeModule() {

      confirmAlert({
        title: "Alerta",
        message: "Desea salir sin aplicar los cambios ?",
        style: "center",
        buttons: [
          {
            label: "Si",
            onClick: () => this._closeModule()
          },
          {
            label: "No",
            onClick: () => ""
          }
        ],
        closeOnEscape: false,
        closeOnClickOutside: false
      });

  }
gustavoghp87 commented 2 years ago

Hi! I was able to do it by this way (I use bootstrap and typescript):

confirmAlert({
    (...)
})

setTimeout(() => {
    const bodyElements: HTMLCollectionOf<Element> = document.getElementsByClassName('react-confirm-alert-body')
    bodyElements[0]?.classList?.add('text-center')
    bodyElements[0]?.firstElementChild?.classList?.add('h3')
    bodyElements[0]?.firstElementChild?.classList?.add('mb-3')
    const buttonGroupElements: HTMLCollectionOf<Element> =
        document.getElementsByClassName('react-confirm-alert-button-group')
    buttonGroupElements[0]?.classList?.add('d-block')
    buttonGroupElements[0]?.classList?.add('m-auto')
    buttonGroupElements[0]?.classList?.add('mt-4')
    buttonGroupElements[0]?.firstElementChild?.classList?.add('bg-danger')
}, 200)