Material UI Modal being dimmed by backdrop - css

Question

I have a modal that is supposed to pop up to show the status of a transaction going through on my website. It works fine other than the fact that the backdrop dimming effect is also applied on top of the modal. My modal is supposed to be white but it ends up being a sort of dark gray. I'm not sure what I'm doing wrong.
Here is the stying 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 for it:
<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 don't really know what is going wrong. It's weird because I use a very similar modal declaration at another point in my project and it works completely as expected.

Answer 1

The Modal component simply renders whatever children you pass to it in front of a backdrop component -- it's up to you to style the children. This issue is happening because, in your code, you're attempting to style the Modal root, not its children.
To fix it, wrap your content in another element onto which you can apply your styles and then move your modalStyle styling to that element. For my example, I wrapped them in a Box:
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={modalStyle}> {/* Moved here */}
...
</Box>
</Modal>
Which produced:
Working CodeSandbox: https://codesandbox.io/s/sad-christian-de6m9k?file=/demo.tsx