如何在 React-Bootstrap 中更改 Modal 的大小/高度/宽度？答案

【问题标题】：How to change the size/height/width of Modal inside React-Bootstrap?如何在 React-Bootstrap 中更改 Modal 的大小/高度/宽度？
【发布时间】：2020-06-22 17:03:30
【问题描述】：

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

// @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;
}

【问题讨论】：

标签： css reactjs react-bootstrap

【解决方案1】：

你所追求的是调整.modal-content的CSS

.modal-content {
  height: 300px;
}

【讨论】：