如何設置 MaterialUI 模態背景的樣式？

Question

我設置了一個 MUI 模式，它目前正在運行，但背景顯示為黑色。 我有適當的樣式，但由於某種原因，背景沒有更新並且仍然是黑色。

我的代碼在下面，屏幕截圖也在打開模式時看到的屏幕截圖。 請讓我知道如何解決此問題。

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

如果您想為背景設置樣式，您的 styles 必須直接傳遞給Modal組件：

例如：

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>
  );
};

工作示例： https://codesandbox.io/s/material-demo-forked-edhqx?file=/demo.js

Answer 2

這就是我自定義 MUI 背景的方式 (MUI v5)

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