ReactStrap 模态关闭图标未显示在模态中以及如何将标头与其他标签一起使用

Question

我是 React js 的新手。在这里，我使用reactStrap.

<Modal isOpen={props.isOpen} centered='true'>
        <ModalHeader>
          Change this Question?
          <button type="button" class="close" aria-label="Close" onClick={props.closeModal} ><span aria-hidden="true">×</span></button>
        </ModalHeader>
        <ModalBody>
          <div className="row">
            <div className="col-md-12 text-center ">
              <Button type="submit" className="btn btn-outline-primary" onClick={props.showChangeQuestionModal} >Change by creating your own Question</Button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center marginForOrOption">
              <span>or</span>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center">
              <Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
            </div>
          </div>
        </ModalBody>
        <ModalFooter>
        </ModalFooter>
      </Modal>
    </div>

现在我在这里添加了该按钮来关闭 modal 。但是在 reactstrap 中它是默认的。但在我的情况下它不会来。

另一个问题是，在 ModalHeader 中，它默认为 h5，所以我该如何更改？

Answer 1

第一个问题：如果您希望 reactstrap 显示自己的关闭按钮，则需要为ModalHeader组件的道具提供toggle方法，因此您的 ModalHeader 应如下所示：

<ModalHeader toggle={this.toggleModalMethod}>
   Change this Question?
</ModalHeader>

第二个问题：您不会在模态标题中使用 h5 做太多事情，但您绝对可以更改 h5 元素样式以使其看起来像您想要的样子：

<ModalHeader>
  <span className="customStyleToOverrideDefault">Change this Question?</span>
</ModalHeader>

如果对您有帮助，请不要忘记为我的答案投票。