I am currently facing an issue with my MUI Modal setup. The backdrop is displaying as black even though I have proper styling in place. No matter what I do, the backdrop remains pitch black and does not update.
Below is the code snippet along with a screenshot showing the problem. Any suggestions on how to resolve this would be greatly appreciated!
https://i.sstatic.net/HnkFR.png
import { Box, Modal, Typography } from "@material-ui/core";
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
modalStyle: {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 300,
bgcolor: "background.paper",
boxShadow: 24,
p: 4,
backgroundColor: "white",
borderRadius: "10px",
},
}));
const PopupModal = ({ postModalOpen, handleClose, children }) => {
const classes = useStyles();
return (
<Modal open={postModalOpen} onClose={handleClose}>
<Box className={classes.modalStyle}>
ModalText
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
style={{
fontSize: "14px",
marginLeft: "5px",
}}
>
{children}
</Typography>
</Box>
</Modal>
);
};
export default PopupModal;