React Modal 我希望能够在垂直长度时滚动模态

Question

我正在使用 react-modal。
我希望能够在屏幕较小时垂直滚动模式。目前在小屏的情况下，modal无法滚动，看不到整个modal

import React, { useState } from "react";
import styled from "styled-components";
import Modal from "react-modal";

export default function App() {
  const [isOpen, setModal] = useState(true);

  const Container = styled.div<{ height?: string }>`
    width: 400px;
    height: ${({ height }) => (height ? height : "")};
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    background: #ffffff;
  `;

  const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)"
    },
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
      padding: "0"
    }
  };

  return (
    <>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => {
          setModal(false);
        }}
        contentLabel="modal"
        style={customStyles}
      >
        <p>Modal</p>
        <Container height={"600px"}></Container>
      </Modal>
    </>
  );
}

Answer 1

 const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)"
    },
    content: {
      ...//
      height:"200px" //or maxHeight 
    }
  };

向模态添加固定高度或 maxHeight

要滚动整个模式，您可以使用此样式

 const customStyles = {
    overlay: {
      background: "rgba(0, 0, 0, 0.5)",
      overflowY:"scroll"
    },
    content: {
     // your code
    }
  };

React Modal 我希望能够在垂直长度时滚动模态

React Modal I want to be able to scroll a modal when it is vertically long

reactjs

react-modal