javascript - How Change Background Color & Blur mui5 modal? - Stack Overflow

admin管理员组

文章数量:1323349

I'm use mui5 modal , modal background is light black .

Mui Modal Code

I need to change background blur and white ? I attached needed output below

I'm use mui5 modal , modal background is light black .

Mui Modal Code

I need to change background blur and white ? I attached needed output below

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow asked May 23, 2022 at 8:11 soma iyappansoma iyappan 54211 gold badge88 silver badges1919 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

To add the blur add this style to the Modal:

      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        style={{ backdropFilter: "blur(5px)" }}
      >

and for the background color change the Box styles:

const style = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: 400,
  bgcolor: "background.paper", // Change to whatever color you want
  border: "2px solid #000",
  boxShadow: 24,
  p: 4
};

...

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
        style={{ backdropFilter: "blur(5px)" }}
      >
{/* Apply styles here: */}
        <Box sx={style}>
          <Typography id="modal-modal-title" variant="h6" ponent="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non modo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );

For background color outside of modal change the stylings of the Modal:

style={{ backdropFilter: "blur(5px)", 
backgroundColor: "rgb(200, 0, 0, 0.5)" }}

Code sandbox

Using sx prop directly in Modal ponent :

<Modal
  sx={{ 
    "& > .MuiBackdrop-root" : {
            backdropFilter: "blur(2px)"
          }
    }}
  open={open}
  onClose={handleClose}
.
.
/>

本文标签： javascriptHow Change Background Color amp Blur mui5 modalStack Overflow