Backdrop dimming the Material UI Modal

My modal is designed to display the status of a transaction on my website, but I'm facing an issue where the backdrop dimming effect is being applied over the modal. Instead of appearing white as intended, the modal ends up having a dark gray tint. I have tried adjusting the styling but seem to be missing something. https://i.sstatic.net/ttXxb.png

Below is the styling for the modal:

const modalStyle = {
    position: 'absolute' as 'absolute',
    top: 0,
    left: 0,
    width: "80%",
    marginLeft: "auto",
    marginRight: "auto",
    marginTop: "150px",
    marginBottom: "150px",
    bgcolor: 'white',
    boxShadow: 24,
    p: 3,
    borderRadius: "25px"
}

And here is the HTML code for the modal:

<Modal
    open={open}
    aria-labelledby="modal-modal-title"
    aria-describedby="modal-modal-description"
    sx={modalStyle}
>
    {!done ? (
        <div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center" }}>
            <h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Loading...</h1>
            <Box style={{ display: 'flex', width: "300px", height: "300px", justifyContent: "center", }}>
                <CircularProgress style={{ marginTop: "50px" }} size={150} />
            </Box>
        </div>) : (
        <div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center", zIndex: "25" }}>
            <h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Completed!</h1>

            <svg className={styles.animatedCheck} viewBox="0 0 24 24">
                <path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none" />
            </svg>
        </div>)}
</Modal>

I'm puzzled by this issue as I have used a similar modal declaration elsewhere in my project without any problems.

Answer №1

The Modal component functions by displaying the children you provide it in front of a backdrop component, leaving the styling of the children up to you. The problem arises when you try to style the Modal root instead of its children.

To resolve this issue, wrap your content in another element where you can apply your desired styles and then transfer your modalStyle styling to that element. In my example, I enclosed them within a Box:

<Modal
  open={open}
  aria-labelledby="modal-modal-title"
  aria-describedby="modal-modal-description"
>
  <Box sx={modalStyle}> {/* Moved here */}
    ...
  </Box>
</Modal>

This resulted in: https://i.sstatic.net/RE7dC.png

For a functional demonstration, refer to this CodeSandbox link: https://codesandbox.io/s/sad-christian-de6m9k?file=/demo.tsx

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

What is the best way to include a ToolTip in the AvatarGroup's "+x" bubble?

Is there a way to implement a ToolTip component for the bubble that displays additional avatars in the Avatar Group component? You can refer to how the component renders in this example from the Material UI documentation (https://material-ui.com/components ...

React-dnd enhances the functionality of the MUI tree view

I've been using a Material UI v4 Treeview with react-dnd and everything works smoothly. However, when I recently upgraded to MUI v5 Treeview, the drag functionality stopped working - the item is no longer draggable. After comparing the two TreeItem im ...

What could be the reason why my buttons are not responding to the ActionListener?

I am encountering some difficulties in making things happen when I click a button. This is where the buttons are declared: public class DoND extends JFrame implements ActionListener { public JButton btnsuit1, btnsuit2, ... , btnsuit26; public static ...

"Enhance your images with dynamic captions using jQuery

Struggling to create an image caption that only appears when hovering over the specific image? Not sure how to select the correct object? The caption is working, but it's appearing for all images at once. I have attempted to target a single image wit ...

How to properly Open a "div" Element by its ID in ReactJS

Today, I want to share an issue that I've been facing. To simplify things, I have mapped a BDD, The result of this mapping is displayed in multiple cards, There's a button that when clicked opens up more details on the map, But here's wh ...

Transferring dynamic parameters from a hook to setInterval()

I have a hook that tracks a slider. When the user clicks a button, the initial slider value is passed to my setInterval function to execute start() every second. I want the updated sliderValue to be passed as a parameter to update while setInterval() is r ...

The CRA Socket.io request encountered a net::ERR_CONNECTION_TIMED_OUT error

https://i.stack.imgur.com/bHB7I.png Hello there! I've been struggling to figure out the issue at hand for quite some time now. I've scoured through numerous StackOverflow questions that address a similar problem, but I haven't had any succ ...

The Enigmatic Essence of TypeScript

I recently conducted a test using the TypeScript code below. When I ran console.log(this.userList);, the output remained the same both times. Is there something incorrect in my code? import { Component } from '@angular/core'; @Component({ sel ...

Every time I make updates, I have to reload the page to see the changes take effect

Currently, I am in the process of developing a web application that utilizes Firebase Firestore as the backend and NoSQL database, with Angular serving as the frontend. With frequent updates and changes being made to the website, it becomes cumbersome to c ...

A guide to adjusting the width without affecting the td element

Currently, I am facing a challenge while coding in HTML. I am trying to create a table with a header (time range) that fits on a single line without affecting the width of the td elements. Below is the code snippet: <table style="border:1px solid #8c ...

What are the possible complications that could arise from implementing this system for designing web pages?

Feeling frustrated with the limitations and compatibility issues of CSS, I decided to create a new approach for structuring webpages. Instead of relying on CSS, I developed a javascript library that reads layout instructions from XML files and uses absolut ...

NextJS and AWS Amplify collaboration for secure authentication routing

After hours of research, I'm struggling to navigate the authentication routing in NextJS combined with AWS Amplify. As a newcomer to NextJS, I want to implement a feature that disables the login/register page for users who are already logged in and pr ...

When attempting to make a POST request to an API using Axios, the response returns an empty value for the 'Access-Control-Allow-Credentials' header

I have a react app running on localhost:3000 and a nodeJS-express server on localhost:8000. My goal is to send a POST request to the jsreport API, but when I attempt to do so, an error occurs: The CORS policy is blocking access to XMLHttpRequest at &apo ...

Configuring Next.js with Nginx in a Docker environment

I'm attempting to containerize a Next.js app with NGINX in Docker. Here is my Dockerfile for the Next.js app: FROM node:18-alpine as builder WORKDIR /my-space COPY package.json package-lock.json ./ RUN npm ci COPY . . RUN npm run build FROM node:18- ...

Are the links drifting to the left?

Some of the links on my website seem to be misbehaving and not following the CSS rules, floating to the left unexpectedly. Strangely, it's only the links that are affected; the rest of the text appears fine. For example, you can observe this issue at ...

The HookState Module, specifically the "@hookstate/core" module, does not have a declared export for the function "useState"

Encountering a problem here - everything was working fine as usual, but today I'm getting the following error when trying to build: Module '"@hookstate/core"' has no exported member 'useState'. I am using NextJS. View image here f ...

How to style text alignment and create a toggle button using HTML and CSS

My attempt at creating a custom toggle button using an HTML input checkbox and custom CSS has resulted in a misalignment between the text and the toggle button itself. Despite my efforts to adjust margins, padding, and heights, I have been unable to resolv ...

React application experiencing continuous SpeechRecognition API without stopping

I need assistance with integrating speech recognition into my web application using Web API's speech recognition feature. Below is the React code I am currently working with: import logo from './logo.svg'; import './App.css'; impor ...

What strategies does relay or Apollo-react utilize to address mutations that involve multiple relationships?

Imagine a scenario where you have a react application that includes the following features on a single page: - New books, - Books by author xyz, - Create new book Now, let's say you create a new book by author xyz. As a result, the page gets updated ...

React is pulling data from a distant API, but the result is different than I had anticipated

After creating the file LatestBookSlide.js, I included the following code: class LatestBookSlide extends Component { componentDidMount() { fetch('http://api/book/hello') .then(function (response){ console.log(response); ...