css - 如何在 React Modal 中添加填充？

Question

我正在构建我的第一个 React 模态框。基本结构现已完成，但我想在边框和内容之间添加更多填充。我认为这很简单，但我已经尝试了几件事，但都没有奏效。

  return (
    <div className={classes.backDrop}>
      <Modal
        backdrop={'static'}
        size='lg'
        show={true}
        centered={true}
        style={classes.modalContainer}
        data-testid='addFleetCustomerModal'
      >
        <div className='modalContainer'>
          <ModalHeader>

          </ModalHeader>
          <Modal.Body>
            <Modal.Title>
              Add Customer
            </Modal.Title>            
            <Form.Group>
              <Form.Label className={classes.highlight}>Company Name*</Form.Label>
              <Form.Control id='companyName' data-testid='companyName' type='text' placeholder='For example: ABC Corp.'

              />
            </Form.Group>
            <Form.Group>
              <Form.Label>
                <strong>NOTES</strong><br/>
                Notes added here can only be viewed and edited by other team members.
              </Form.Label>
              <textarea className="form-control" id="companyNotes" rows="3"></textarea>
            </Form.Group>
          </Modal.Body>
          <Modal.Footer>
            <Row>
              <a href='/#'>Cancel</a>
              &nbsp; &nbsp; &nbsp;
              <Button variant='secondary' size='sm'>&nbsp; Next &nbsp;</Button>
            </Row>
          </Modal.Footer>
        </div>
      </Modal>
    </div>
  );

关于我应该添加什么 CSS(以及在哪里添加)以将模态的内容向内移动一点的任何想法？

Answer 1

将此添加到您的 CSS 中:

.modal-header,
.modal-body,
.modal-footer {
  padding: 2rem; //change the padding as you want
}

这将更改填充，但会更改各部分之间的全宽线。

参见 Working demo 1

你也可以在整个模式周围添加填充，但这不会使线条全宽:

.modal-content {
  padding: 2rem;
}

参见 Working demo 2