react-bootstrap：Modal的dialogClassName道具不工作

我使用dialogClassName prop來將模態的寬度更改爲90％。 CSS不會改變任何東西。我已經驗證了style.css適用於所有其他類。react-bootstrap：Modal的dialogClassName道具不工作

此SO question的解決方案不起作用。 documentation也不起作用。

我感謝您的幫助！

render方法modal.js的：

render() { 
    return (
     <div> 
     <CardMain openModal={this.handleOpen} 
        {...this.props} /> 

     <Modal 
      show={this.state.open} 
      onHide={this.handleClose} 
      dialogClassName="main-modal" 
     > 

      <ModalMain tabKey={this.state.tabKey} 
         {...this.props} /> 

      <FeedbackForm /> 
     </Modal> 
     </div> 
    ); 
    }

的style.css：

.main-modal { 
    width: 90%; 
}

來源

2016-04-07 Nico

你檢查了元素並檢查了它爲什麼沒有被應用？也許你有其他的CSS規則比這個更優先.. –

謝謝你的建議。事實證明，該標籤的類是「主模式模式對話框」。所以「模態對話框」必須重寫它。這是內置的react-bootstrap模態類。任何想法如何覆蓋它？ – Nico

你可以編寫內聯CSS樣式..它會比引導規則更優先。否則你可以通過使用你的模態ID在你的site.CSS中指定規則。帶ID選擇器的CSS規則具有更多的優先級..或者你可以添加一個自定義類，並用所有可能的類選擇器編寫你的CSS規則。當選擇器中使用的類的數量很高時，它會得到更多的優先權......使用最適合您的類 –

根據源代碼dialogClassName用於設置的className爲對話單元。您可以將dialogComponent屬性傳遞給Modal組件。

您可以在下一行讀取dialogComponent的描述在Modal docs到dialogComponentClass。

來源

2016-04-07 17:09:52 gyzerok

這個解決方案需要我從頭開始重新定義模態的每個css道具。根據文檔中dialogClassName的例子，我應該能夠簡單地重新定義spec規範，比如寬度。 – Nico

正如你可以在莫代爾呈現（https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L168）中看到的，這個屬性只傳遞給來自dialogComponent屬性的對話框（https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Modal.js#L154）。 – gyzerok

我明白你的觀點。但是，當我實現時，我得到的模態沒有包含在react-bootstrap Modal中的css。所以我需要重新定義一切，這是不可取的。使用dialogComponent不是dialogClassName的很好替代品。 – Nico

react-bootstrap：Modal的dialogClassName道具不工作

回答

相關問題