[英]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.我设置了一个 MUI 模式,它目前正在运行,但背景显示为黑色。 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.请让我知道如何解决此问题。
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;
If you'd like to style the backdrop, your styles must be passed to the Modal
component directly:如果您想为背景设置样式,您的 styles 必须直接传递给Modal
组件:
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工作示例: https://codesandbox.io/s/material-demo-forked-edhqx?file=/demo.js
This is how I customized my MUI Backdrop (MUI v5)这就是我自定义 MUI 背景的方式 (MUI v5)
<Backdrop open={isOpen} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.25)', zIndex: 1 }} onClick={handleCloseMenu} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.