如何添加您自己的自定义 css 以覆盖 react-confirm-alert 默认值

Posted 2023-03-06

【中文标题】如何添加您自己的自定义 css 以覆盖 react-confirm-alert 默认值

【英文标题】：How to add your own custom css to override react-confirm-alert defaults

【发布时间】：2021-04-18 13:08:09

【问题描述】：

我正在使用来自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);

但我不知道如何更改按钮、消息或标签。请帮忙。

【参考方案1】：

这是渲染示例：

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

您可以通过类名（.react-confirm-alert、.react-confirm-alert-body、.react-confirm-alert-button-group 等）或使用子选择器（.react-confirm-alert-body h1、.react-confirm-alert-button-group button、.react-confirm-alert-button-group button:first-child 等）来定位元素.

您还可以创建并传递您自己的自定义 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-alertposition:relative

不客气。这应该是一个新问题，但如果您尝试过position: relative，您可以添加top: 50%; 将顶部移至中间，并添加transform: translateY(-50%); 将其再次上移一半。您可能还需要添加margin: auto。如果上面的答案有助于解决您的问题，您可以通过单击旁边的复选标记按钮来接受我的答案；）

我刚刚勾选了它:)。我非常感谢你，非常感谢。知道如何在我的示例中定位消息（询问“您确定吗？”之间的文本）？

谢谢 :) 不幸的是，他们没有在消息周围添加div，所以它不是那么简单。您可以更改.react-confirm-alert-body 的样式并更新h1 和按钮的样式以将它们改回。不理想，但如果您不想添加自定义 UI，这可能是最简单的。

非常感谢队友，非常感谢，祝您白天或黑夜愉快。