typescript 如何在Material-UI中启用Modal的滚动?

hjzp0vay  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(153)

是否可以创建一个模式,其行为类似于对话框,滚动设置为“纸”?我目前有很多文本要在Modal中显示,但它最终超出了浏览器窗口的大小,而且没有滚动的选项。

h7appiyu

h7appiyu1#

这在很大程度上取决于实际的用例,但一般来说,Modal中的内容容器可以手动设置maxHeightoverflowY: auto的样式,以具有类似于scroll="paper"设置的Dialog的垂直滚动容器。
示例:stackblitz

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

相关问题