Enhancing react-confirm-alert: Steps to incorporate your personalized CSS for customizing default settings

I'm currently utilizing a confirmation popup feature provided by react-confirm-alert:

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

Is there a way to customize its appearance? I was able to modify the overlay using the following code snippet.

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

However, I am uncertain on how to change the design of the buttons, message text or labels. Any guidance would be greatly appreciated.

javascriptcssreactjscss-selectors

Answer №1

Take a look at this example:

<div id="custom-ui-alert">
  <div class="custom-ui-alert-overlay">
    <div class="custom-ui-alert">
      <div class="custom-ui-alert-body">
        <h1>Please Confirm Your Action</h1>
        Do you really want to proceed with this action?
        <div class="custom-ui-alert-button-group"><button>Confirm</button><button>Cancel</button></div>
      </div>
    </div>
  </div>
</div>

You can easily select these elements by their respective classes (.custom-ui-alert, .custom-ui-alert-body, .custom-ui-alert-button-group, etc.), or through child selectors (.custom-ui-alert-body h1, 

.custom-ui-alert-button-group button
, 
.custom-ui-alert-button-group button:first-child
, etc.).

If you prefer, you can also design and use your own custom UI component that aligns with your specific styling preferences:

alertCustom({
  customUI: ({ onClose }) => {
    return (
      <div className="prompt">
        <h1 className="prompt__title">Are You Absolutely Sure?</h1>
        <p className="prompt__body">Do you wish to remove this item?</p>
        <button onClick={onClose} className="prompt__btn prompt__btn--no">No</button>
        <button
          onClick={() => {
            this.handleRemoveItem();
            onClose();
          }}
          className="prompt__btn prompt__btn--yes"
        >
          Yes, Remove It!
        </button>
      </div>
    );
  }
});

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

Answer №2

Simply include the following code snippet:

.custom-modal-overlay {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

https://i.sstatic.net/AbCdE.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

Is this a problem with npm or JavaScript?

Hi everyone, I'm trying to figure out if this issue is related to JavaScript or npm. If there's a problem with my JS code, could someone please help me identify it? PLEASE NOTE I used some code to get the current uid from Firebase. I'm ...

javascriptnode.jsfirebasenpm

Send the form data from a modal controller in AngularJS to an ng-controller outside of the modal

There seems to be a confusion with the functionality not working as expected: In my Angular application, I have a main page with an ng-controller named "SearchCtrl" that handles sending search requests to a webserver. app.controller('SearchCtrl&apos ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrap

How to include a for loop within an array as an element

Below is an illustration of the data available: $scope.allmovies[ {title:"Harry Potter", time:130}, {title:"Star Wars", time:155}, {title:"Lord of the Rings", time:250}, {title:"Goonies", time:125}, {title:"Fast and Furious", time:140} ]; var mostpopular ...

javascriptangularjsionic-framework

Ways to extract the initial layer of information from a JSON document

I have a JSON file named movie.json stored externally, and it follows this format: { "action": [ { "id": "1001", "name": "Matrix" }, { "id": "1002", & ...

javascriptjqueryjson

Adding JavaScript to dynamically loaded AJAX content

I'm new to AJAX and JavaScript and unsure of how to get it working. Here is the website: When you click on portfolio images, the details load via AJAX. I want to create a slideshow for projects with multiple full-sized images. However, due to the co ...

javascriptjqueryhtmlajaxwordpress

Issue: Unable to load the file named 'script.ts' while employing chrome.scripting.executeScript

Currently, I am working on developing a chrome extension using Vite with React and Typescript along with CRXJS. This is my initial project in this domain. The issue I am encountering is related to executing a script on the current tab when a button is clic ...

reactjstypescriptgoogle-chrome-extensionvite

Third Party Embedded Video requiring SSL Certificate

I am currently facing an issue where I am trying to embed videos from a website that does not have an SSL certificate. This is causing my own website to appear insecure when the page with the embedded video loads, despite the fact that my website has its ...

javascripthtmlsslvideo.js

Tips for activating multiple CSS animations when scrolling

I am currently working on a project that involves multiple CSS animations. However, I am facing an issue where these animations only occur once when the page initially loads. I would like them to trigger every time the user scrolls past them, regardless of ...

javascripthtmlcsscss-animations

Django CSS not loading properly on webpage after initial load

I am having trouble understanding why the main.css file is not loading properly in my Django project. I am using the skeleton boilerplate and trying to change the background color, but the changes are not reflecting on the webpage. It's strange becaus ...

htmlcssdjango

What is the most elegant way to retrieve a new item from Firebase and read it?

My goal is to display the result of a successful read on a page, with only one attempt available before the headers are set and the page is sent. I am looking to retrieve one new value, generated after a listener was initiated so as not to pull existing da ...

javascriptnode.jsexpressfirebase

Only function components can utilize hooks within their body. The useState functionality is currently not functioning as expected

Currently working on a GatsbyJS project and attempting to utilize a Hook, however encountering an error message. Initially, I decided to remove the node_modules folder and package.json.lock file, then executed npm install again, unfortunately without reso ...

javascriptreactjsreact-hooksgatsby

Unable to utilize the Object.values method with an object in TypeScript

I am attempting to create an array of values from all the keys within an object by using the Object.values(obj) function, but I encountered the following error message: No overload matches this call. Overload 1 of 2, '(o: { [s: string]: string; } | ...

javascriptreactjstypescriptnext.js

The `Provider` received an invalid child context of type `function` named `store`. It was expecting an object type instead

Seeking to establish a connection between the state in the reducers and the components within my React application. The reducer code can be found in reducer_books.js: export default function(){ return [ {title:'A'}, {title:' ...

reactjsredux

"Optimizing npm packages for front-end web development in vanilla JavaScript: A guide to bundling for production deployments on

My website is built using vanilla HTML/CSS/JavaScript with ES6 modules and can be deployed to GitHub pages and Netlify. I have set up my site by importing "main.js" in my HTML like this: <script src="js/main.js" type="module" defer&g ...

javascriptnpmnetlifyjamstack

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

I have a set of checkboxes and one is designated as "all." When this box is clicked, I want to automatically select all the other checkboxes in the same group. If the "all" box is clicked again, I would like to deselect all the other checkboxes. Currently ...

javascriptjqueryhtmlcheckbox

Tips on how to select only the currently active tab and change its background color

I am currently troubleshooting the AJAX tabs functionality on my website. The issue I am facing is that the current code does not apply any styling to indicate an active tab. I believe I may need to use some JavaScript code to address this problem, but I ...

jqueryhtmlcssajax

What is the process for implementing a fallback image in Material UI?

Hey there! I'm currently looking to customize the fallback image of a Material UI Avatar with my own original image. Does anyone have any tips on how I can achieve this? const fallbackImage = "../../fallback/img.png" const AvatarWithBadge = ...

javascriptreactjsmaterial-ui

CSS - Customizing the appearance of consecutive child divs

I'm struggling with adjusting the margin between two child divs when they follow each other. The current margin is set at 3rem, but I want it to be 1rem if both child containers have the class "narrow": Is there a way to achieve this without changing ...

jquerycsssassdrupalcss-selectors

Tips for inserting PHP information into the <link rel="stylesheet" type="text/css" href="CSS/sheet.css" /> reference tag

In my script, I have successfully implemented a feature that displays the OS and browser details. The output is in the form of eight CSS scripts, showcasing Mac, PC, and Ubuntu OS's with IE, Firefox, Safari, and Chrome browsers. While the script is st ...

phpcssxhtmlmysqli