如何更改React-Bootstrap内部Modal的大小/高度/宽度？

Question

我想从react-bootstrap更改模态的高度，但是不起作用。例如，当我使用dialogClassName时，当我更改背景颜色时，它会将其更改为实际模式的outside，就好像它是一个更大的容器一样。

// @flow

import * as React from 'react';
import className from 'classnames';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';


export type Props = {
  header: String,
  infoType: String,
  info: String
}

const Modalc = ({header, infoType, info}) => {
  const [show, setShow] = React.useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant='primary' onClick={handleShow}>
        Open Modal
      </Button>

      <Modal
          className='modal'
          dialogClassName='modal-container'
          keyboard
          centered
          show={show}
          onHide={handleClose}
        >
        <Modal.Header className='modal-header' closeButton>
          <Modal.Title>{header}</Modal.Title>
        </Modal.Header>
        <Modal.Body className='modal-body'>
          <h3 className='modal-infotype'>{infoType}</h3>
          {info}
        </Modal.Body>
      </Modal>
    </>
  );
}

export default Modalc;

.modal{
  background-color: rgba(21, 21, 21, 0.7);
}

.modal-container{
  height: 24.37500rem;
}

.modal-header{
  background-color: black;
  font-size: 1.25rem;
  letter-spacing: -0.2px;
  color: white;
}

.modal-body{
  font-size: 0.875rem;
  background-color: black;
  letter-spacing: -0.14px;
  line-height: 1.250em;
  color: #919191;
}

.modal-infotype{
  color: white;
  font-size: 1.125rem;
  letter-spacing: -0.18;
}

Answer 1

这里也是，您找到任何解决方案了吗？