如何改变背景颜色和模糊mui5模式？

Question

我用的是mui5模式，模态背景是浅黑色。

梅氏码

​

我需要改变背景模糊和白色？我在下面附加了所需的输出

​

​

Answer 1

要添加模糊，请将此样式添加到Modal中：

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

对于背景颜色，请更改Box样式：

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" component="h2">
            Text in a modal
          </Typography>
          <Typography id="modal-modal-description" sx={{ mt: 2 }}>
            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
          </Typography>
        </Box>
      </Modal>
    </div>
  );

对于模态之外的背景颜色，更改modal的样式：

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

代码沙箱

Answer 2

直接在模态组件中使用sx支柱：

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