CODEWITHSUNDEEP
cssreactjsmaterial-ui
Alex
Alex

Reputation: 323

How can style the backdrop of a MaterialUI modal?

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.

enter image description here

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;

Upvotes: 1

Views: 10597

Answers (5)

Erinaldo Prado
Erinaldo Prado

Reputation: 1

<Modal
  open={openModalButtons}
  onClose={() => {
    setOpenModalButtons(false);
  }}
  aria-labelledby="modal-menu-sidebar"
  closeAfterTransition
  BackdropProps={{
    sx: {
      //Your style here....
      background: 'transparent',
    },
  }}
>
  <Fade in={openModalButtons}>
    <Box sx={style}>
      <div>teste</div>
    </Box>
  </Fade>
</Modal>

Upvotes: 0

PraZ
PraZ

Reputation: 67

Here is the simplest solution that worked for me. I used the sx property of the Modal component to set the style of the css class used by materialUI.

    <Modal
        open={props.open}
        onClose={props.onClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        sx={{
            '& .MuiModal-backdrop': {
                backgroundColor: 'rgba(0, 150, 150, 0.5);',
            },
        }}
    >
        <Card className='modal'>
            {props.children}
        </Card>
    </Modal>

While you can use a simple hex value to set the color (such as backgroundColor: '#00ADB5', this will completely omit the transparency of the backdrop. If you want to keep the opacity, you should use the rgba() function as it allows you to set the opacity in the 4th argument (In the above example, it is 0.5)

I am not sue if this is the most elegant solution but this is the simplest one that worked for me. Hope this helps.

Upvotes: 0

NIKE
NIKE

Reputation: 596

We can use slots and slotProps of modal props.

For example:

<Modal
  open={isOpened}
  onClose={() => setIsOpened(false)}
  closeAfterTransition
  slots={{ backdrop: Backdrop }}
  slotProps={{
    backdrop: {
      sx: {
        //Your style here....
        backgroundColor: 'rgba(69, 89, 167, 0.4)',
      },
    },
  }}
>
//Your content here...
</Modal>

I hope this can be helped.

Upvotes: 8

justdvl
justdvl

Reputation: 874

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

Upvotes: 2

Steve G
Steve G

Reputation: 13357

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().

Upvotes: 1

Related Questions