如何在 React Modal 中添加填充？答案

【问题标题】：How to add padding within React Modal?如何在 React Modal 中添加填充？
【发布时间】：2019-08-08 02:39:33
【问题描述】：

我正在构建我的第一个 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（以及在哪里）将模态内容向内移动一点有什么想法吗？

【问题讨论】：

你能告诉我们你的尝试吗？
内容是指<Modal.Body> 或整个<Modal> 中的内容？

标签： css reactjs react-bootstrap

【解决方案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

【讨论】：

【解决方案2】：

我很抱歉，大家。昨天下午我发这个的时候一定很累。让我解释一下解决方案：

我在上面发布的代码位于一个功能组件中，其定义如下： const AddCustomer = ({ classes }) => {

classes来自父组件，定义如下： class UserMgmtPage extends React.Component {

在这个父组件中，CSS styleSheet 通过react-jss 代码注入。然后我将这些相同的 CSS 类传递给功能性子组件。

您会注意到第二行，它始终有效： <div className={classes.backDrop}>

我的失败是使用相同的语法。因此解决方案是这样的： <div className={classes.modalContainer}>

很抱歉给您带来麻烦，但我非常感谢所有尝试提供帮助的人！

【讨论】：