Как изменить размер / высоту / ширину модала внутри React- Bootstrap? - PullRequest
Новая
       5

Как изменить размер / высоту / ширину модала внутри React- Bootstrap?

0 голосов
/ 10 марта 2020

Я хочу изменить высоту модала с react-bootstrap, но это не работает. Когда я использую 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;
}
...