How can style the backdrop of a MaterialUI modal?

Question

I have a MUI Modal set up, it's currently working, however the backdrop is being displayed as black. I have styling in place, but for some reason the backdrop is not being updated and remains pitch black.

My code is below, a screenshot is also below of what I see when the Modal is opened. Please let me know how I can fix this issue.

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;

Answer 1

If you'd like to style the backdrop, your styles must be passed to the Modal component directly:

For example:

const useStyles = makeStyles((theme) => ({
  /** Changed modalStyle */
  modalStyle: { backgroundColor: "rgba(255, 0, 0, 0.5)" },
  /** Moved content styling to new class */
  contentStyle: {
    /** Also removed some invalid attributes **/
    position: "absolute",
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)",
    width: "300px",
    backgroundColor: "white",
    borderRadius: "10px"
  }
}));

const PopupModal = ({ postModalOpen, handleClose, children }) => {
  const classes = useStyles();

  return (
    // Note the changed className props with your sample code
    <Modal
      open={postModalOpen}
      onClose={handleClose}
      className={classes.modalStyle}
    >
      <Box className={classes.contentStyle}>
        <Typography
          id="modal-modal-title"
          variant="h6"
          component="h2"
          style={{
            fontSize: "14px",
            marginLeft: "5px"
          }}
        >
          {children}
        </Typography>
      </Box>
    </Modal>
  );
};

Working Example: https://codesandbox.io/s/material-demo-forked-edhqx?file=/demo.js

Answer 2

This is how I customized my MUI Backdrop (MUI v5)

<Backdrop open={isOpen} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.25)', zIndex: 1 }} onClick={handleCloseMenu} />