React-Modal無法設置位置

Question

我正在使用react-modal，我找不到任何方法來成功設置Modal的位置。 我在線使用每個示例的內聯樣式，但它們沒有任何效果。 我正在做我看到的反應模式網站上的codepen示例中的工作，但它在我的應用程序中不起作用。 有些東西顯然是不同的，但我看不出它是什么。

這就是我渲染模態的方式：

render: function() {
    return (
      <Modal
        bsSize={this.props.size}
        aria-labelledby="contained-modal-title-lg"
        show={this.props.show}
        style={{ content : {top: '70%'}}}
        onHide={this.hideModal}>
        <Modal.Header>
          <Modal.Title id="contained-modal-title-lg">{this.props.modalTitle}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {this.props.modalBody || this.modalBody}
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.hideModal}>Cancel</Button>
          <Button bsStyle="primary" onClick={this.props.modalCallback}>{this.props.confirmButtonText}</Button>
        </Modal.Footer>
      </Modal>
    );

我已經為style屬性嘗試了許多不同的值，但是我設置的任何內容都沒有效果。 我也試過沒有bsSize屬性，但也沒有用。 我只需要內容的頂部邊框稍低，因為它在同一位置的另一個模態的頂部打開，我希望它在視覺上明顯在頁面上打開了兩個模態。 我正在使用react-modal 3.3.1。

Answer 1

感謝GitHub發布的帖子提供的幫助，我按照以下方式開展工作：

<Modal dialogClassName='custom-dialog'...>

CSS：

.custom-dialog {width:48% !important; top:20%;}

我缺少的部分是需要用!important來覆蓋寬度設置。 寬度是相對於視口寬度的，所以我通過試驗和錯誤找到了一個值，它給出了基礎模態寬度的所需百分比。