Css Material UI Modal 因背景而变暗

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.

这就是对情态车的期待

onst 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"
}

下面是它的HTML语言:

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

我真的不知道哪里出了问题.这很奇怪，因为我在我的项目中的另一个地方使用了非常类似的模式声明，它完全按照预期工作.