我正在使用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,
    });
  }

有沒有一種造型的方法？我可以這樣設置覆蓋。

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

但我不知道如何改變按鈕，信息或標簽。請幫幫忙。

這是渲染的示例:

<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>

您可以通過類名(.反應-確認-報警，。反應-確認-預警-正文，。反應-確認-報警-按鈕-分組等。)，或者通過使用子選擇器(。反應-確認-警報-正文h1，.反應-確認-提醒-按鈕-組按鈕，。反應-確認-提醒-按鈕-組按鈕:第一個-孩子，等等。).

您還可以創建并傳遞您自己的自定義UI組件，您可以按照自己想要的方式來設計它:

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

加上這個就行了

.react-confirm-alert-overlay {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(5px);
}