是否可以创建一个模式,其行为类似于对话框,滚动设置为“纸”?我目前有很多文本要在Modal中显示,但它最终超出了浏览器窗口的大小,而且没有滚动的选项。
h7appiyu1#
这在很大程度上取决于实际的用例,但一般来说,Modal中的内容容器可以手动设置maxHeight和overflowY: auto的样式,以具有类似于scroll="paper"设置的Dialog的垂直滚动容器。示例:stackblitz
Modal
maxHeight
overflowY: auto
scroll="paper"
Dialog
import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; import Typography from "@mui/material/Typography"; import Modal from "@mui/material/Modal"; import Fade from "@mui/material/Fade"; import Backdrop from "@mui/material/Backdrop"; export default function App() { const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); return ( <div> <Button onClick={handleOpen} variant="contained"> Open modal </Button> <Modal open={open} onClose={handleClose} closeAfterTransition BackdropComponent={Backdrop} BackdropProps={{ timeout: 500, }} > <Fade in={open}> <Box sx={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%, -50%)", width: 400, bgcolor: "background.paper", border: "3px solid #000", borderRadius: "10px", boxShadow: 24, py: 4, }} > <Typography variant="h6" component="h2" sx={{ px: 4 }}> Lorem ipsum </Typography> <Typography component="div" // 👇 Content box styled to scroll when overflowing sx={{ px: 4, mt: 2, maxHeight: "50vh", overflowY: "auto" }} > Long text content here </Typography> </Box> </Fade> </Modal> </div> ); }
1条答案
按热度按时间h7appiyu1#
这在很大程度上取决于实际的用例,但一般来说,
Modal
中的内容容器可以手动设置maxHeight
和overflowY: auto
的样式,以具有类似于scroll="paper"
设置的Dialog
的垂直滚动容器。示例:stackblitz