ฉันใช้กล่องโต้ตอบจากวัสดุส่วนติดต่อผู้ตอบโต้กับ js และต้องการจะเพิ่มความกว้างของมัน ฉันรู้ว่ามันมีอุปกรณ์ประกอบที่เรียกว่า maxWidth
และฉันต้องใช้มัน มันจะยิ่งเพิ่มความกว้าง upto 900px(เมื่ maxWidth="lg"
). ฉันรู้ว่ามันมี fullScreen
อุปกรณ์ประกอบในที่กล่องโต้ตอบต้องใช้ทั้งหมดองจอภาพด้วย สิ่งที่ฉันต้องการคือไม่ต้องใช้ทั้งหน้าจอแต่ฉันอยากจะมีมากกว่าความกว้างกว่า 900px. ใครก็ได้ช่วยฉัน?
1
คิดว่ามันออกมา...
คุณต้องการนำเข้า makeStyles
จาก material-ui/core
และยกเลิกบางวัสดุ styling.
นี่คือกล่องโต้ตอบแบ่งส่วนประกอบรหัส
import React from 'react';
//Material UI Components
import {
Dialog,
DialogContent
} from '@material-ui/core';
//Material UI Styling
import {
makeStyles
} from '@material-ui/core/styles';
const useStyles = makeStyles({
root: {
".MuiDialogContent-root": {
padding: "0px 24px 8px 24px !important"
},
"& .MuiDialog-paperWidthLg": {
maxWidth: "none !important"
},
"& .MuiDialog-paper": {
margin: 0
},
"& .MuiDialogTitle-root": {
padding: "4px !important"
}
},
content: {
"&:first-child": {
paddingTop: "12px"
}
}
});
export default function PopUp(props) {
const {
children,
openPopup,
setOpenPopup,
} = props;
const classes = useStyles();
const handleClose = () => {
setOpenPopup(false);
};
return (
<
Dialog className = {
classes.root
}
onClose = {
handleClose
}
open = {
openPopup
}
maxWidth = "lg" >
<
DialogContent className = {
classes.content
} > {
children
} <
/DialogContent>
<
/Dialog>
)
}