How to add your own custom css to override react-confirm-alert defaults

user_14776018 0
Viewed 4544

I'm using this confirmation popup from react-confirm-alert:

   popup = _id => {
    confirmAlert({
      title: "Delete user",
      message: "Are you sure?",
      buttons: [
        {
          label: "Ja",
          onClick: () => this.deleteUserHandler(_id)
        },
        {
          label: "Nej",
        }
      ],
      closeOnEscape: true,
      closeOnClickOutside: true,
    });
  }

Is there a way to style it? I can set the overlay like so.

.react-confirm-alert-overlay {
  background: rgba(0,0,0,0.5);

But I have no idea how to change the buttons, message or label. Please help.

reactjs css-selectors css javascript
1 Answers

This is the rendered example:

<div id="react-confirm-alert">
  <div class="react-confirm-alert-overlay">
    <div class="react-confirm-alert">
      <div class="react-confirm-alert-body">
        <h1>Confirm to submit</h1>
        Are you sure to do this.
        <div class="react-confirm-alert-button-group"><button>Yes</button><button>No</button></div>
      </div>
    </div>
  </div>
</div>

You can target the elements by their class name (.react-confirm-alert, .react-confirm-alert-body, .react-confirm-alert-button-group, etc.), or by using child selectors (.react-confirm-alert-body h1, .react-confirm-alert-button-group button, .react-confirm-alert-button-group button:first-child, etc.).

You can also create and pass down your own custom UI component which you can style any way you want:

confirmAlert({
  customUI: ({ onClose }) => {
    return (
      <div className="alert">
        <h1 className="alert__title">Are you sure?</h1>
        <p className="alert__body">You want to delete this file?</p>
        <button onClick={onClose} className="alert__btn alert__btn--no">No</button>
        <button
          onClick={() => {
            this.handleClickDelete();
            onClose();
          }}
          className="alert__btn alert__btn--yes"
        >
          Yes, Delete it!
        </button>
      </div>
    );
  }
});

https://www.npmjs.com/package/react-confirm-alert#custom-ui-component

user_61263730
Related