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

screenshot of working example

fyi: you can also override all backdrops in your application, on a global scale, by passing a muibackdrop override object to createmuitheme().

score:1

this is how i customized my mui backdrop (mui v5)

<backdrop open={isopen} sx={{ backgroundcolor: 'rgba(0, 0, 0, 0.25)', zindex: 1 }} onclick={handleclo u} />

Related Query

More Query from same tag