我如何在中心設置reactstrap模態標題的內容？

Question

我正在使用reactstrap Modal，其中有ModalHeader顯示我的內容。但是當我嘗試將內容放在標頭中心時遇到了問題。

完成檢查元素后，我發現ModalHeader內部有<h5>標簽，該標簽中的內容即將到來，我檢查了<h5>標簽是否未使用Modal-Header的全寬度。 。 如果有人知道reactstrap Modal，請指導我如何將Modal-Header內容放在中心。

這是我的示例代碼。

<ModalHeader toggle={props.toggle} > 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>

Answer 1

您可以使用cssModule道具將className添加到h2標簽。 添加w-100 text-center為我解決問題

<ModalHeader toggle={props.toggle}  cssModule={{'modal-title': 'w-100 text-center'}}> 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>