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

Answer 2

对不起，大家。昨天下午发布此邮件时，我一定真的很累。让我解释一下解决方案：

我上面发布的代码在一个功能组件中，该组件定义如下： def id_exists(id): ids = [x['jobid'] for x in json_array] if id in ids: return True else: return False

const AddCustomer = ({ classes }) => {来自父组件，其定义如下： classes

在此父组件中，通过class UserMgmtPage extends React.Component {代码将CSS styleSheet注入到其中。然后，我将这些相同的CSS类传递给功能性子组件。

您会注意到这第二行一直有效： react-jss

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

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

如何在React Modal中添加填充？

2 个答案: